Angular Component是兩個聲明的一部分

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中使用它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組件添加到users.module.ts exports數組中，以便您可以在導入UsersModule其他模塊中使用它

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

Answer 3

如果使用ionic cli 組件AddButton創建具有ionic cli 組件 ，它將自動在該模塊中創建ComponentsModule和新組件。

要在其他模塊中使用此組件，您只需將該模塊導入所需的模塊中。

另外在ComponentModule中你應該添加imports: [IonicModule]以便能夠像離子按鈕一樣使用離子組件

Answer 4

如果您認為ButtonComponent不適合在共享模塊中，請為AddButton一個單獨的模塊。 現在這個新模塊應該聲明並導出AddButtonComponent 。 您應該將此新模塊導入到您希望用於的任何子模塊中。 這不應該導致任何問題。 這也將使您免於加載所有共享組件只是為了讓AddComponent正常工作。

如果組件在多個位置/模塊中使用，則為組件創建另一個模塊是最佳實踐。