javascript - การบูตสแตรปโมดูลหลายตัวใน Angular 6 ผ่านอาร์เรย์

เป็นไปได้ไหมที่จะประกาศอาเรย์และใช้มันในการเริ่มต้นหลายคอมโพเนนต์ใน module.ts ฉันกำลังลองทำอะไรแบบนี้

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

แล้วก็

bootstrap: initialComponents

ซึ่งทำให้ฉันได้รับข้อผิดพลาดดังต่อไปนี้

ข้อผิดพลาด: โมดูล oa ถูกบูทสแตรปแล้ว แต่ไม่ได้ประกาศคอมโพเนนต์ "@NgModule.bootstrap" หรือวิธีการ "ngDoBootstrap" โปรดกำหนดอย่างใดอย่างหนึ่ง

คำตอบ #1

คุณสามารถปรับแต่งการบูตสแตรปโดยการใช้งาน ngDoBootstrap เป็นเมธอดของ AppModule คุณสามารถระบุคอมโพเนนต์ของคุณที่ต้องการให้บูตสแตรปได้ในคุณสมบัติ entryComponents ของ @NgModule

@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');
     }
 }

หากคุณต้องการบริการ คุณสามารถเข้าถึงได้ผ่านการฉีดพึ่งพา (ใส่ไว้ใน AppModule เป็นพารามิเตอร์ของคอนสตรัคเตอร์) แต่ฉันไม่ทราบว่ามีข้อจำกัดใด ๆ กับสิ่งนี้เมื่อเทียบกับ DI ในคอมโพเนนต์หรือบริการหรือไม่ นี่คือเอกสารสำหรับ ApplicationRef และวิธี bootstrap ของมัน

คำตอบ #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