导入 Angular 功能模块时渲染组件

Question

我有一个 Angular 应用程序。 在我的app.module.ts声明中，我会做这样的事情：

App.module（我的根模块）：

let imports = [
     //....
];
if (!environment.production) {
   imports.push(DevToolsModule);
} 

@NgModule({
  imports: imports,
  ...
  })

DevToolsModule（我的功能模块）：

我的独立功能模块DevToolsModule如下所示：

@NgModule({
  declarations: [DeveloperToolsComponent],
  imports: [
    CommonModule
  ],
  entryComponents: [DeveloperToolsComponent]
})
export class DevToolsModule {}

我现在要做的是：

当我的DevToolsModule被导入时，我想在我的屏幕上显示一个包含一些开发人员信息的组件。 它应该是自动添加的，我不想在我的app.html模板中的任何地方定义它。

有没有人取得这样的成就？

非常感谢，塞巴斯蒂安

Answer 1

您可以执行以下操作，

    let developmentModules = [ 
         DevToolsModule
     ] 
     if(environment.production) {
        developmentModules = [];
        enableProdMode();
     }
     @NgModule({
       imports: [
         BrowserModule,
         ...developmentModules
       ],
       declarations: [],
       providers: [],
     })
     export class AppModule

扩展运算符...允许轻松地将扩展版本的数组放入另一个数组中。

Answer 2

当您在根模块中导入功能模块时，它将自动添加到树中。 您不需要为此编辑 app.component.html 模板，但为了演示，您应该这样做。 如果您无法编辑 app.component.html 模板，您可以将功能模块组件动态添加为 app.component.ts 中的@viewchild 实例和 ComponentFactoryResolver，但我不建议这样做。 相反，您应该将功能模块组件定义为声明，然后在模板中使用它

<child-component></child-component>

无论如何，如果您仍然觉得这很愚蠢，您可能需要查看文章： Dynamically add components to the DOM with Angular

Answer 3

理论上这样想：

constructor(@Optional() devToolsModule:DevToolsModule ) {
    if(devToolsModule){
       //add component to view
    }
}