Angular 可以有多个引导组件吗？答案

【问题标题】：Can Angular have more than one bootstrap component?Angular 可以有多个引导组件吗？
【发布时间】：2017-06-29 09:54:17
【问题描述】：

愚蠢的问题提醒：

在我们的主 app.module.ts 文件中，我们使用定义顶级组件的值设置引导参数。所以有了这个：

@NgModule({
  bootstrap: [AppComponent]
})

我们告诉当我们的模块被使用时，我们的顶级组件是AppComponent。但为什么它在数组中？能不能有更多的顶级组件……？

【问题讨论】：

github.com/angular/angular/blob/master/packages/core/src/… 按照你声明的顺序渲染
@yurzui，谢谢，如果没有提供答案，我会删除问题
我想会有很多答案:)
@Maximus - 感谢您的全面回答。稍后我会回到这个，因为现在对我来说没有意义为什么要使用这个迷人的功能:)
@Maximus - 我现在是零，但非常感谢！ :))

标签： angular bootstrapping

【解决方案1】：

是的，Angular 可以有很多顶级组件。您可以自己轻松检查：

@Component({selector: 'a-comp', template: `A comp`})
export class AComp {}

@Component({selector: 'b-comp', template: `B comp`})
export class BComp {}


@NgModule({
  imports: [BrowserModule],
  declarations: [AComp, BComp],
  bootstrap: [AComp, BComp]
})
export class AppModule {
}

------------------

<body>
    <a-comp></a-comp>
    <b-comp></b-comp>
</body>

引擎盖下的机制

Angular 将创建两个独立的视图树，并在此处将它们附加到 ApplicationRef

PlatformRef_.prototype._moduleDoBootstrap = function (moduleRef) {
        var appRef = (moduleRef.injector.get(ApplicationRef));
        if (moduleRef._bootstrapComponents.length > 0) {
            moduleRef._bootstrapComponents.forEach(function (f) { return appRef.bootstrap(f); });
  --------------------------------

  // will be called two times
  ApplicationRef_.bootstrap = function (componentOrFactory, rootSelectorOrNode) {

  ...
  ApplicationRef.attachView(viewRef: ViewRef): void {
    const view = (viewRef as InternalViewRef);
    this._views.push(view);
    view.attachToAppRef(this);
  }

然后，当变更检测将运行时，applicationRef 将通过这两个视图：

  ApplicationRef.tick(): void {
    ...
    try {
      this._views.forEach((view) => view.detectChanges());
      ...

令人着迷的事物

更令人着迷的是，您可以通过编程方式将<b-comp> 附加到应用程序，而无需在module.boostrap: [] 中指定组件BComponent：

export class AComponent {
  constructor(r: ComponentFactoryResolver, app: ApplicationRef) {
    const f = r.resolveComponentFactory(BComponent);
    app.bootstrap(f, 'b-comp');

---------------

@NgModule({
  imports: [BrowserModule],
  declarations: [AComponent, BComponent],
  entryComponents: [BComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

--------------

<body>
    <a-comp></a-comp>
    <b-comp></b-comp>
</body>

【讨论】：

我们能否定义一个数组并将其设置为“bootstrap”属性，我正在尝试这给我以下错误错误：模块 oa 已引导，但它没有声明“@NgModule.bootstrap”组件也不是“ngDoBootstrap”方法。请定义其中之一。

【解决方案2】：

这是因为您可以引导不同的模块同时拥有不同的应用程序。

您可以在此处查看此示例：

Bootstrapping muliple components in Angular2

其中重要的部分是：

@NgModule({
  imports: [],
  declarations: [App1, App2, App3],
  bootstrap: [App1, App2, App3]
})
export class BaseModule {}

<body>
   <app1>App1</app1>
  <app2>App1</app2>
  <app3>App1</app3>
</body>

【讨论】：