如何正确引导 Angular 应用程序

Question

我一直在考虑“引导”角度 (v6) 应用程序的最佳方法。通过引导，我的意思是从服务器上的静态 json 文件中获取我的应用程序可能需要的初始配置，并可能在触发组件创建级联等之前对所需的各种数据发出 1 或 2 个其他 http 请求。

目前我们的方法是在 AppComponent 中做所有事情，并将所有内容包装在应用组件的模板中，例如

<div *ngIf="isBootstrapping">...show a spinner here...</div>
<div *ngIf="!isBootstrapping">...put main site contents here...</div>

然后，当各种请求完成并且我拥有我认为必要的所有数据时，只需在应用程序组件中切换 isBootstrapping。不过，这对我来说感觉像是一种肮脏的方法，我认为 Angular 有一些更优雅的东西。

我是否应该在具有 useFactory 选项的提供程序中执行此操作？

Answer 1

Angular 确实有一些更优雅的东西。这是APP_INITIALIZER 令牌。它看起来像：

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


function initApp(http: HttpClient) {
  return () => {
    return http.get('https://link.to/configuration.json')
      .pipe(
          // do your configuration stuff
      )
      .toPromise();
  };
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initApp,
      multi: true,
      deps: [HttpClient]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

它将运行initApp 逻辑并等待它完成，然后再提升AppComponent。