在另一个模块中使用在 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选择器。

我希望这对你有用