如何在页面中使用组件答案

【问题标题】：How to use Component in page如何在页面中使用组件
【发布时间】：2019-03-28 21:50:02
【问题描述】：

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

我创建了我的页面：ionic g pages name
我创建了我的组件：ionic g component name

此时我只是试试这个：

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

app-menu-button 是组件选择器

我收到此错误：1. If 'app-menu-button' is an Angular component, then verify that it is part of this module.

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

exports: [
    MenuButtonComponent
  ]

但它不起作用。

我的目标是在几个页面中显示这个组件。

谢谢，

【问题讨论】：

标签： angular ionic-framework angular7 ionic4

【解决方案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 文件中删除您的导入和声明，该文件是在您创建自定义组件时自动添加的。

【讨论】：

【解决方案2】：

所有组件都应该在模块中声明，如下所示。

@NgModule({
   declarations: [
      MenuButtonComponent
   ]
})

【讨论】：

【解决方案3】：

将您的组件添加到声明数组和入口组件数组中（如果它最初加载） declarations: [] && entryComponents: []

【讨论】：