Угловой 2 проверить, готов ли дочерний компонент

Question

Можно ли зарегистрировать в корневом компоненте AppComponent, что он является дочерним компонентом. Детский компонент - это компонент, который загружается с использованием маршрутов и директива <router-outlet> в шаблоне AppComponent. Маршрут компонента для ребенка имеет асинхронный идентификатор защиты canActivate. Я хочу выполнить некоторый код в AppComponent, когда защита проверки подлинности завершена.

Answer 1

Используйте сервис. Зарегистрируйте службу в providers модуля AppMomponent NgModule (или непосредственно на AppComponent). Служба может иметь EventEmitter или Subject, на которые подписывается AppComponent. Когда защитник проверки подлинности завершен, он выдает событие в службе,

Answer 2

См component communication, например Родитель прослушивает ребенка событие

Answer 3

Посмотрите на мою UserService.

import { Injectable, ApplicationRef } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 
import { Router, ActivatedRoute } from '@angular/router'; 

@Injectable() 
export class UserService 
{ 
    id: number; 
    userEmail: string; 
    userName: string; 
    gravatar: 
    { 
    md5: string 
    ,defaultAva: string 
    }; 

    loggedIn = false; 
    private initUser: Promise<void>; 

    constructor 
    (
    private http: Http 
    ,private router: Router 
    ,private route: ActivatedRoute 
    ,private applicationRef: ApplicationRef 
) 
    { 
    this.initUser = this.login(); 
    } 

    login() 
    { 
    return this.http 
    .get('/api/session') 
    .toPromise() 
    .then(session => 
    { 
     let user: UserService = session.json(); 

     this.setUser(user); 
    }) 
    .catch(err => 
    { 
     console.log(err); 
    }); 
    } 

    setUser(user: UserService) 
    { 
    if(user && user.id) 
    { 
     this.loggedIn = true; 

     for(let prop in user) 
     { 
     this[prop] = user[prop]; 
     } 

     this.gravatar.defaultAva = 'https://www.gravatar.com/avatar/00000000000000000000000000000000'; 

     // App-notification event "user is loggedIn" 
     this.applicationRef.tick(); 
    } 
    } 

    redirectIfNoLoggedIn() 
    { 
    return this.initUser 
    .then(() => 
    { 
     if(!this.loggedIn) 
     { 
     this.router.navigate(['pre-account/login']); 
     } 
    }) 
    .catch(err => 
    { 
     console.log(err); 
    }) 
    } 

    logout() 
    { 
    this.http 
    .delete('/api/session') 
    .toPromise() 
    .then(session => 
    { 
     if(session && session.json().ok) 
     { 
     this.id = null; 
     this.userEmail = null; 
     this.userName = null; 

     this.loggedIn = false; 
     } 

     // App-notification event "user is loggedOut" 
     this.applicationRef.tick(); 
    }) 
    .catch(err => 
    { 
     console.log(err.json()); 
    }); 
    } 
} 

Теперь я могу использовать эту услугу следующим образом:

export class AccountModule 
{ 
    constructor(private user: UserService) 
    { 
    user.redirectIfNoLoggedIn(); 
    } 
}