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" no组件包装根组件模板的内容，那么将创建根组件。
Route guards阻止路线导航，直到条件变为true。
APP_INITIALIZER阻止Angular2应用程序的初始化，直到返回的Promise结算。有关示例，请参阅How to pass parameters rendered from backend to angular2 bootstrap method
Observables通知状态更改以及缓存响应以防止多次调用。有关示例，请参阅What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?。

我问题的选择方法是使用APP_INITIALIZER。不能使用使用路由器的服务（例如Angulartics2），因为此时路由器尚未初始化。下面是使用async-await的示例代码。

@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组件的初始化？

1 个答案: