Angular 角度分量两个声明的一部分

我创建了一个小组件，我想在一些页面中使用它，但在多个延迟加载页面中包含它时，我似乎遇到了一些问题

add.button.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'add-button',
  template: `
  <ion-buttons end>
    <button ion-button icon-only (click)="navToAdd()">
      <ion-icon name="md-add-circle"></ion-icon>
    </button>
  </ion-buttons>`
})

export class AddButton {
  visible: boolean = true;

  @Output() navigate: EventEmitter<any> = new EventEmitter();

  navToAdd() {
    this.navigate.emit(null)
  }
}

users.module.ts-就像

users.module.ts

我想在其他页面模块中使用该组件，就像我在下面的

users.module.ts

中使用它一样

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UsersPage } from './users';
import { AddButton } from '../../components/add-button.component';

@NgModule({
  declarations: [
    UsersPage,
    AddButton
  ],
  imports: [
    IonicPageModule.forChild(UsersPage),
  ],
})
export class UsersPageModule { }

---

您的AddButton可能位于a上，然后您可以通过导入模块在多个位置使用它

将

AddButton

组件添加到

导出
用户.module.ts
数组中，以便您可以在导入
用户模块
的其他模块中使用它

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UsersPage } from './users';
import { AddButton } from '../../components/add-button.component';

@NgModule({
  declarations: [
    UsersPage,
    AddButton
  ],
  imports: [
    IonicPageModule.forChild(UsersPage),
  ],
  exports: [
    AddButton
  ]
})
export class UsersPageModule { }

如果您使用爱奥尼亚
ionic cli
和爱奥尼亚g组件添加按钮创建组件，它将自动在该模块中创建组件模块和新组件

要在其他模块中使用该组件，您只需将该模块导入所需的模块中

此外，在ComponentModule中，您应该添加
imports:[IonicModule]
，以便能够使用离子组件，如ion buttons
如果您认为ButtonComponent不适合在共享模块中，请为
AddButton
创建一个单独的模块。现在，这个新模块应该声明并导出
AddButtonComponent
。您应该将此新模块导入到您希望其用于的子模块中。这应该不会引起任何问题。这也将使您免于仅仅为了使
AddComponent
工作而加载所有共享组件

如果组件在多个位置/模块上使用，最好为组件创建另一个模块

我将为这些组件创建一个公共模块，并将该模块包含在其他模块中OK。。。创建共享模块似乎足够简单。我不知道该把它放在哪里。我是否在所有页面模块中包含共享模块？像
users.module.ts
，
events.module.ts
？
users.module.ts
应该是什么样子？
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UsersPage } from './users';
import { AddButton } from '../../components/add-button.component';

@NgModule({
  declarations: [
    UsersPage,
    AddButton
  ],
  imports: [
    IonicPageModule.forChild(UsersPage),
  ],
  exports: [
    AddButton
  ]
})
export class UsersPageModule { }