通过数组在Angular 6中引导多个模块

Question

是否可以声明一个数组并使用该数组来引导module.ts中的多个组件。 我正在尝试这样的事情

    export var initialComponents = [];
    initialComponents.push(AppComponent);
    if(condition) {
      initialComponents.push(IchFooterComponent);
    }

接着

bootstrap: initialComponents

这给我以下错误

错误：模块oa已引导，但未声明“ @ NgModule.bootstrap”组件或“ ngDoBootstrap”方法。 请定义其中之一。

Answer 1

您可以通过实现自定义引导ngDoBootstrap作为方法AppModule 。 您可以在entryComponents属性中@NgModule需要引导的@NgModule

@NgModule({
    entryComponents: [AComponent, BComponent, ...]
    ...
 })
 export class AppModule {

     constructor() {}

 ngDoBootstrap(app: ApplicationRef) {
     if (Math.random() > 0.5) {
         appRef.bootstrap(AComponent, '#app');
     } else {
         appRef.bootstrap(BComponent, '#app');
     }
 }

如果需要服务，则可以通过依赖项注入（在AppModule中将其作为构造函数参数输入）来访问它们。 但是我不知道与组件或服务中的DI相比是否有任何限制。 这是ApplicationRef及其引导方法的文档。

Answer 2

再试一次（下面是示例代码）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

var initialComponents: any[] = []; 

initialComponents.push(AppComponent);
if (true) {
  initialComponents.push(HeroesComponent);
}

@NgModule({
  declarations: initialComponents,
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

再试一次：

https://stackblitz.com/edit/angular-vimqb1?file=src/app/app.module.ts