如何序列化angular2组件的初始化？

Question

目前，当引导应用程序组件时，angular2 不会等待所有生命周期阶段的完成。

以下方法开始结束序列将打印到控制台：

AppComponent.ngOnInit() - START

SearchComponent.ngOnInit() - START

AppComponent.ngOnInit() - END

如何等待app组件的所有生命周期阶段完成，顺序如下：

AppComponent.ngOnInit() - START

AppComponent.ngOnInit() - END

SearchComponent.ngOnInit() - START

Answer 1

您无法控制生命周期回调。

您可以使用

*ngIf 在条件更改为 true 之前不显示应用程序的某些部分。如果用这样的 *ngIf="isLoaded" 包装根组件模板的内容，则不会创建除根组件之外的任何组件。
Route guards 以阻止路由导航，直到条件变为 true。
APP_INITIALIZER 会阻止 Angular2 应用程序的初始化，直到返回的 Promise 解析。示例见
Observables 用于通知状态更改并缓存响应以防止多次调用。有关示例，请参阅。

我的问题选择的方法是使用 APP_INITIALIZER。无法使用使用路由器的服务（例如 Angulartics2），因为此时路由器尚未初始化。下面是使用异步等待的示例代码。

@NgModule({
imports: [
    HttpModule,
    routing,
    SharedModule.forRoot()
],
providers: [
    {provide: APP_BASE_HREF, useValue: '/'},
    {provide: APP_INITIALIZER,
        useFactory: (appModule:AppModule) => async () => {
            await appModule.init();
        }, deps: [AppModule], multi:true}
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {

    constructor(private service:Service) {
    }

    // tslint:disable-next-line:typedef
    async init() {
        await this.service.init();
    }
}

如何序列化angular2组件的初始化？

How to serialize initialization of angular2 components?

angular

angular2-services