如何在 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> 标签987654331@ 而是出于明显的原因。然后我尝试在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 cannot import custom component is not a know element

但是至少可以说公认的答案很差，当涉及到创建一个新模块时，我进入了未知的（对我而言）领域。无论如何，我尝试了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 { }

然后我将新模块导入到app模块中，如下所示：

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。而且我不知道下一步该做什么。

我发现的另一个问题 here 提出了相同的解决方案，或者将我的组件添加到 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

你是在正确的轨道上：

• 创建新应用：ionic start my-new-app
• 生成新组件：ionic generate 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 {}