如何在 Ionic v4 中生成有效的自定义组件?

Question

我是Ionic的新手，我正在使用v4，我是Angular的新手，也是Typescript的新手，所以请耐心等待，如果我问愚蠢的问题，请原谅我。我在Linux上。

我已经启动了一个新的Ionic应用程序

$ ionic start
[...]
Project name: comptest
Framework: Angular
Starter template: tabs
[...]

然后我试了一下：

$ cd comptest
$ ionic serve -l
[...]
? Install @ionic/lab? Yes
[...]

浏览器打开，应用程序工作正常。然后我尝试生成一个新的自定义组件：

$ ionic generate component mySpan1
[...]
[OK] Generated component!

这创造了my-span1-component.ts，其中包括：

import { Component } from '@angular/core';
@Component({
selector: 'my-span1',
templateUrl: './my-span1.component.html',
styleUrls: ['./my-span1.component.scss'],
})
export class MySpan1Component {
constructor() { }
}

请注意，我编辑了选择器并使其看起来只是my-span1而不是默认app-my-span1，但我没有碰其他任何东西，甚至没有 html<p>标签，将来会因为显而易见的原因而成为<span>。然后我尝试在 tab1 页面中使用<my-span1>，所以我编辑了tab1.page.html并添加了<my-span1>标签：

<ion-content>
<my-span1></my-span1> <!-- This is my edit -->
<ion-card class="welcome-card">
<img src="/assets/shapes.svg" alt="" /> 
[...]

编辑后，页面停止工作。在浏览器控制台中，我收到此错误：

'my-span1' 不是已知元素

谷歌搜索我发现了另一个SO问题：Ionic 4无法导入自定义组件不是已知元素

但至少可以说，接受的答案很差，当涉及到创建一个新模块时，我进入了未知的(对我来说(领域。无论如何，我尝试了ionic generate module components，它起作用了，然后我在那个新模块中声明了MySpan1Component：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MySpan1Component } from '../my-span1/my-span1.component';
@NgModule({
declarations: [
MySpan1Component
],
imports: [
CommonModule,
]
})
export class ComponentsModule { }

然后我将新模块导入到应用程序模块中，如下所示：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ComponentsModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

但我仍然在控制台中收到相同的错误，例如'my-span1' is not a known element.我不知道下一步该怎么做。

我在这里找到的另一个问题建议相同的解决方案，或者将我的组件添加到exports数组中：也尝试过，但没有运气(控制台中的相同错误(：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//import { ComponentsModule } from './components/components.module';
import { MySpan1Component } from './my-span1/my-span1.component';
@NgModule({
declarations: [AppComponent, MySpan1Component],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, /*ComponentsModule*/],
exports: [MySpan1Component],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

我的代码中缺少什么可以使my-span1工作？

Answer 1

你走在正确的轨道上：

• 创建新应用程序：离子启动我的新应用程序
• 生成新组件：离子生成 my-span1
• 将其添加到您的 tab1.page.module 作为导入 + 添加到声明

这样：

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { MySpan1CompComponent } from '../my-span1-comp/my-span1-comp.component'; // add this import statement to the module within which you intend to use your new component
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: Tab1Page }])
],
declarations: [Tab1Page, MySpan1CompComponent] // add your component in here 
})
export class Tab1PageModule {}