如何在 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' is not a known element

谷歌搜索我发现了另一个 SO 问题：

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

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

How to generate a working custom component in Ionic v4?

custom-component

ionic-framework

angular

ionic4