angular - 为什么@NgModule 中的 "bootstrap"key 是一个数组？

Question

据我所知，一个应用程序只能有一个入口点。如下面给出的代码片段所示，我们在决定应用程序入口点的引导键中传递一个数组。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, MyComboboxComponent, 
                    CollapsibleDirective, CustomCurrencyPipe],
  imports: [BrowserModule],
  providers: [UserService, LessonsService],
  bootstrap: [AppComponent]

})
export class AppModule {

}

P.S:我正在学习 Angular 2，这个问题可能听起来很傻 :)

Answer 1

您可以根据需要传递任意数量的 Bootstrap 组件。您最终只会得到几个独立的组件树:

bootstrap: [AComponent, BComponent]

        RootModuleInjector
                |
                |
       ApplicationRef.views
       /                   \
      /                     \
   AComponent              BComponent

另见 What are the implications of bootstrapping multiple components

运行变更检测时，Angular 将分别为每棵树运行变更检测:

class ApplicationRef {
   tick(): void {
    ...
    try {
      this._runningTick = true;
      // here this._views.length equals to 2
      this._views.forEach((view) => view.detectChanges());

如果您愿意，您甚至可以手动将新的根组件添加到 ApplicationRef:

const componentRef = componentFactoryResolver.resolveComponentFactory(SomeComponent)
applicationRef.attachView(componentRef.hostView);

        RootModuleInjector
                |
                |
       ApplicationRef.views
       /        |           \
      /         |            \
AComponent  SomeComponent   BComponent

如果您需要在根组件之间共享一些数据，您可以在根模块上定义一个提供程序，它将用于创建一个 RootModuleInjector:

@NgModule({
    providers: [ServiceSharedBetweenRootComponents]
}
export class AppModule {}

然后你就可以将它注入(inject)到每个根组件中:

export class AComponent {
    constructor(service: ServiceSharedBetweenRootComponents)