两个声明的角组件部分

Question

我创建了一个小组件，希望在某些页面中使用，但是在多个延迟加载页面中包含它时，似乎出现了一些问题。

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)
  }
}

app.modules.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    TabsPage
  ],
  providers: [
    ...
  ]
})
export class AppModule { }

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 { }

Answer 1

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

Answer 2

将您的AddButton组件添加到exports的{​​{1}}数组中，以便可以在导入了users.module.ts的其他模块中使用它

UsersModule

Answer 3

如果您使用带有离子 g组件AddButton 的ionic cli创建组件，它将自动创建一个ComponentsModule和该模块中的新组件。

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

还要在ComponentModule中添加imports: [IonicModule]，以便能够使用离子组件，例如离子按钮

Answer 4

如果您认为ButtonComponent不适合放在共享模块中，请为AddButton制作一个单独的模块。现在，此新模块应声明并导出AddButtonComponent。您应该将此新模块导入您要使用的任何子模块中。这应该不会造成任何问题。这也将使您不必为了使AddComponent正常工作而加载所有共享组件。

  

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