时间戳

首页 > 解决方案 > 如何在 Ionic v4 中生成有效的自定义组件？

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

问题描述

我是 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而不是 default app-my-span1，但我没有触及任何其他东西，甚至没有触及<p>未来将成为 a 的 html 标记，<span>原因很明显。然后我尝试<my-span1>在tab1页面中使用，所以我编辑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 known 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. 而且我不知道下一步该做什么。

我在这里找到的另一个问题提出了相同的解决方案，或者将我的组件添加到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正常工作？

标签： angularionic-frameworkionic4custom-component

解决方案

你走在正确的轨道上：

  • 创建新应用： ionic start my-new-app
  • 生成新组件：离子生成 my-span1
  • 将其添加到您的 tab1.page.module 作为 import + 添加到声明

像这样：

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 {}

推荐阅读