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

Question

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

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

然后

bootstrap: initialComponents

这给了我以下错误

Error: The module oa was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. Please define one of these.

Answer 1

您可以通过将 ngDoBootstrap 实现为 AppModule 的方法来自定义引导。 您可以在 @NgModule

的 entryComponents 属性中列出需要引导的组件

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

     constructor() {}

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

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