typescript 角6通孔阵列中自举多模块

but5z9lq  于 2022-11-26  发布在  TypeScript
关注(0)|答案(2)|浏览(127)

是否可以声明一个数组并使用它来引导module. ts中的多个组件。

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

然后再

bootstrap: initialComponents

这会产生以下错误
错误:模块oa已引导,但它没有声明“@NgModule.bootstrap”组件或“ngDoBootstrap”方法。请定义其中一个。

6yoyoihd

6yoyoihd1#

再试一次(下面是示例代码):

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

bvpmtnay

bvpmtnay2#

您可以通过将ngDoBootstrap实现为AppModule的方法来自定义引导。您可以在@NgModuleentryComponents属性中列出需要引导的组件

@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及其引导方法的文档。

相关问题