在 Ionic 2 中使用可重用组件 [重复]答案

【问题标题】：Using a reusable component in Ionic 2 [duplicate]在 Ionic 2 中使用可重用组件 [重复]
【发布时间】：2019-03-04 06:42:55
【问题描述】：

我想在另一个组件（home.html）中使用一个组件。但我得到一个错误：

错误：模板解析错误：'reusable' 不是已知元素： 1. 如果'reusable' 是 Angular 组件，则验证它是该模块的一部分。 2. 要允许任何元素添加“NO_ERRORS_SCHEMA”到该组件的“@NgModule.schemas”。 ("[错误->]

这是我的“reusable.html”文件。

<ion-header>
 <ion-navbar>
<ion-button (click) = "onPress()">
  Logout 
</ion-title>
</ion-navbar>
</ion-header>

这是我的 reusable.ts 文件：

import { Component } from '@angular/core';
import { Toast } from '@ionic-native/toast';

@Component({
  selector: 'reusable',
  templateUrl: 'reusable.html'
})

export class ReusableComponent {

  constructor(private toast: Toast) { }

  onPress(){
    this.toast.show(`You have been logged out!`, '5000', 'center').subscribe(
      toast => {
        console.log(toast);
  });
}  
}

这是我正在使用的 home.html 文件：

<reusable>
  </reusable> 

<ion-content padding>
 <p> The world is your oyster. <p>
</ion-content>

这是我的 app.module.ts 文件：

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

【问题讨论】：

你能展示你的模块文件吗？您可能错过了声明或导出该组件。
我刚加了。

标签： angular typescript ionic2

【解决方案1】：

您应该将您的component 添加到实现它的module 的declarations 数组中，以供相同module 的其他components 使用。要在另一个 module 中使用它们，您还应该将 component 添加到 exports 数组中。

declarations: [
    MyApp,
    HomePage,
    ReusableComponent 
  ],

【讨论】：

应该是components module
@core114 是的，这一点很重要！
谢谢@AmitChigadani。它有效！