在另一個模塊中使用在 app 模塊中聲明的組件

Question

我在應用程序模塊中有一個通知彈出窗口聲明。 此通知彈出窗口是自定義的，因此它具有標記為 @Inputs 的自定義字段。 我希望能夠在另一個需要通知彈出功能的組件中使用這個組件。

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule.forChild(),
  ]
})
export class PopupNotificationModule { }

@NgModule({
  declarations: [
    AppComponent,
    PopupNotificationComponent 
  ],
  imports: [
    PopupNotificationModule
  ],

})

export class AppModule 

@NgModule({
  declarations: [
    CarListComponent,
  ],
  imports: [
  ],

})

export class CarModule { }

我嘗試導入和導出但沒有成功。

Answer 1

創建一個單獨的文件夾，其中包含通知彈出組件和模塊文件

@NgModule({
  declarations: [PopupNotificationComponent],
  imports: [
    CommonModule,
    TranslateModule.forChild(),
  ]
})
export class PopupNotificationModule { }

在 PopupNotificationModule 中聲明 PopupNotificationComponent ，每當您希望在另一個模塊中使用時，只需導入 PopupNotificationModule 即可。

Answer 2

首先你必須像這樣在PopupNotificationModule的聲明和導出部分添加PopupNotificationComponent

@NgModule({
  declarations: [PopupNotificationComponent],
  imports: [
    CommonModule,
    TranslateModule.forChild(),
  ],
  exports: [PopupNotificationComponent],
})
export class PopupNotificationModule { }

然后你必須像這樣在應用程序模塊導入部分導入PopupNotificationModule

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        PopupNotificationModule,
        CarModule 
      ],
    
    })
    
    export class AppModule

現在您已經在要使用PopupNotificationComponent的另一個模塊中導入PopupNotificationModule

在您的情況下，它是CarModule

@NgModule({
  declarations: [
    CarListComponent,
  ],
  imports: [
    PopupNotificationModule 
  ],

})

export class CarModule { }

現在您可以在CarModule組件中使用PopupNotificationComponent選擇器。

我希望這對你有用