angular - 如何在页面中使用组件

Question

我正在尝试在多个页面中添加自定义组件。

• 我创建了我的页面:ionic g 页面名称
• 我创建了我的组件:ionic g 组件名称

此时我只是试试这个:

<ion-content>
    <app-menu-button></app-menu-button>
</ion-content>

app-menu-button 是组件选择器

我收到此错误:1。如果“app-menu-button”是一个 Angular 组件，则验证它是该模块的一部分。

我尝试在我的应用程序模块文件中添加:

exports: [
    MenuButtonComponent
  ]

但它不起作用。

我的目标是在多个页面中显示此组件。

谢谢，

Answer 1

如果您使用延迟加载，则必须在页面模块中导入您的自定义组件。例如:如果您想在名为 ExamplePage 的页面中使用组件 AppMenuButtonComponent，则必须将其导入页面模块。

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ExamplePage } from './example';
import { AppMenuButtonComponent } from '../../components/appmenubutton/appmenubutton';

@NgModule({
  declarations: [
    ExamplePage,
    AppMenuButtonComponent
  ],
  imports: [
    IonicPageModule.forChild(ExamplePage),

  ],
  exports: [
    ExamplePage,
  ]
})
export class ExamplePageModule {

}

不要忘记从创建自定义组件时自动添加的 app.module.ts 文件中删除导入和声明。