Как сериализовать инициализацию угловых компонентов?

Question

В настоящее время при загрузке компонента приложения angular2 не ждет завершения всех этапов жизненного цикла.

Следующий метод запуск концевой последовательности будет выведен на консоль:

AppComponent.ngOnInit() - START

SearchComponent.ngOnInit() - START

AppComponent.ngOnInit() - END

Как для завершения всех фаз жизненного цикла АРР компоненты будет подождал, так что последовательность выглядит следующим образом:

AppComponent.ngOnInit() - START

AppComponent.ngOnInit() - END

SearchComponent.ngOnInit() - START

Answer 1

Вы не можете контролировать обратные вызовы жизненного цикла.

Вы можете использовать

• *ngIf чтобы не показывать части приложения до изменения состояния в true. Если вы закроете содержимое шаблона корневого компонента таким компонентом *ngIf="isLoaded", то за исключением того, что будет создан корневой компонент.

• Route guards для предотвращения навигации по маршруту до состояния становится true.

• APP_INITIALIZER, который предотвращает инициализацию вашего приложения Angular2 до тех пор, пока не вернется возвращаемый Promise. См. How to pass parameters rendered from backend to angular2 bootstrap method для примера

• Наблюдаемые уведомления об изменениях состояния, а также кэширование ответов для предотвращения множественных вызовов. См. Пример What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?.

Выбранный способ для моей проблемы заключался в использовании APP_INITIALIZER. Службы, использующие маршрутизатор (например, Angulartics2), не могут использоваться, потому что на данный момент маршрутизатор еще не инициализирован. Ниже приведен пример кода с использованием async-ожидания.

@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(); 
    } 
}