Question

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

当前，我们的方法是在AppComponent中进行所有操作，并将所有内容包装在app组件的模板中，例如

<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。

如何正确引导角度应用程序

1 个答案: