angular – 为什么@NgModule中的“bootstrap”键是一个数组?

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

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,这个问题可能听起来很傻:)

解决方法

您可以根据需要传递任意数量的引导程序组件.您将最终得到几个独立的组件树:

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 {}

然后你就可以将它注入每个根组件:

export class AComponent {
    constructor(service: ServiceSharedBetweenRootComponents)

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...