導入 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
    }
}