在 Ionic 2 中使用可重用组件

Question

我想在另一个组件中使用一个组件 (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 {}

Answer 1

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

declarations: [
    MyApp,
    HomePage,
    ReusableComponent 
  ],

在 Ionic 2 中使用可重用组件

Using a reusable component in Ionic 2

typescript

ionic2

angular