Angular 2检查子组件是否准备好答案

【问题标题】：Angular 2 check if child component is readyAngular 2检查子组件是否准备好
【发布时间】：2016-09-18 10:05:57
【问题描述】：

是否可以检查根组件AppComponent 它的子组件已准备好。子组件是在 AppComponent 模板中使用路由和<router-outlet> 指令加载的组件。子组件路由具有异步身份验证保护canActivate。我想在认证保护完成后在 AppComponent 中执行一些代码。

【问题讨论】：

标签： angular

【解决方案1】：

使用服务。在 AppComponent NgModule 的providers 中注册服务（或直接在 AppComponent 上）。该服务可以具有 AppComponent 订阅的 EventEmitter 或 Subject 。当身份验证保护完成时，它会在服务上发出一个事件，

【讨论】：

问题是我有很多子组件，其中一些有警卫，有些没有警卫。如果我不更换警卫或子组件会容易得多。我只想更改 AppComponent
我想你可以让你的所有子组件扩展一个 BaseComponent 类，它会在ngOnInit 方法中引发服务上的事件。唯一的问题是你必须小心，任何也有 ngOnInit 的子组件记得调用 `super.ngOnInit()'

【解决方案2】：

参见component communication，例如父母监听子事件

【讨论】：

文章的那部分是指绑定到子组件上的 EventEmitter - 适用于直接子组件，它不能通过路由组件完成。

【解决方案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();
  }
}

【讨论】：