Angular2 - 引导属性与方法

Question

我是 Angular2 的新手(之前没有任何版本经验)——有人能解释一下 bootstrap 作为 NgModule 的属性与bootstrap 作为一种方法？

例如，在 Angular2 英雄之旅 教程中，app.module.ts 包括以下内容:

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})

在其他例子中，我见过这样的事情:

let phoenixChannelsProvider = provide(PhoenixChannels, { useFactory: () => {
  return new PhoenixChannels("ws://localhost:4000/socket");
} });    
bootstrap(AppComponent, [phoenixChannelsProvider]);

如果有人能在这里模糊地概述“自举”概念的应用差异，我们将不胜感激。

Answer 1

你需要他们两个:

第一个是模块，基本上是你的根模块

bootstrap: [ AppComponent ] 

这就是说，在这个模块中，我要启动我的应用程序的根组件是 AppComponent，然后从那里获取它。

表示此模块正在引导 AppComponent ，如果您注意到它是一个数组，这意味着您可以将多个应用程序作为根模块的一部分进行引导，这并不常见。

但是第二个，在最新版本的 Angular 中看起来像这样:

platformBrowserDynamic().bootstrapModule(AppModule)

实际上是引导/启动 angular2 应用程序。

Angular2 框架需要一个起点，对吗？这是了解您的应用程序和所有内容的起点。

如果您有 Java 背景，这是您的主要功能。

换句话说，应用程序需要从一个地方开始，那就是起点(实际上不止于此)。

如果您注意到，platformBrowserDynamic 方法在某种程度上是不言自明的，它在谈论浏览器平台，这意味着您可以创建自己的平台并引导您的应用程序根模块(引导您的 appComponent ).

如果你搜索更多，你会发现 NativeScript 或 Angular2Universal 或其他，主要区别在于引导函数 (platformBrowserDynamic)。

例如，在 Universal 中，我们有:

platformUniversalDynamic().bootstrapModule(AppModule)

或者当你想使用 web worker 时，你会看到:

  bootstrapWorkerApp(AppModule, []);