Angular 2检查子组件是否准备就绪

3 回答

• 0

  使用服务 . 在AppComponent NgModule的 providers 中注册服务（或直接在AppComponent上注册） . 该服务可以具有AppComponent所订阅的EventEmitter或Subject . 身份验证后卫完成后，它会在服务上发出事件，

  回复于 2024-05-06T05:03:50+08:00
• 0

  请参阅component communication，例如，Parent侦听子事件

  回复于 2024-05-06T05:03:50+08:00
• 0

  看看我的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();
    }
  }
  

  回复于 2024-05-06T05:03:50+08:00