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

Posted 2023-02-22

【中文标题】在 Ionic 2 中使用可重用组件 [重复]

【英文标题】：Using a reusable component in Ionic 2 [duplicate]

【发布时间】：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 

【问题讨论】：

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

我刚加了。

【参考方案1】：

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

declarations: [
    MyApp,
    HomePage,
    ReusableComponent 
  ],

【讨论】：

应该是components module

@core114​​ 是的，这一点很重要！

谢谢@AmitChigadani。它有效！