Question

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

错误：模板解析错误：'reusable'不是一个已知元素：1.如果'reusable'是Angular组件，则请验证它是否属于此模块。 2.要允许任何元素，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。（“ [错误->]

这是我的“ 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添加到实现它的declarations的{{1}}数组中，以供同一module的其他components使用。要在另一个module中使用它们，您还应该将module添加到component数组中。

exports

在Ionic 2中使用可重用组件

1 个答案: