javascript - 在 LoginService 中等待加载的用户数据

Question

我想在 LoginService 中加载用户数据节点，并在加载其他服务之前等待，因为所有其他服务的路径的一部分取决于用户数据。 (在我的例子中，我想在 userdata 节点中保存一个 gameid -> 例如我的用户已指定 gameid:1其他数据的路径为/1/chat, ... )

Auth.guard.ts

//Angular
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
//Services
import { LoginService } from '../services/login.service';

@Injectable()
export class AuthGuard implements CanActivate{

  constructor(
    private router: Router,
    private loginService: LoginService,
  ){}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.loginService.getAuthenticated().map(user => {
          this.loginService.setUser(user);
          if(user) {
            return true;
          } else {
            this.router.navigate(['/login']);
            return false;
          }
    })
  }

}

登录.service.ts

//Angular
import { Injectable, Inject }     from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
//Rxjs
import { Observable } from 'rxjs';
//Firebase
import { AngularFire, AuthProviders, FirebaseAuthState, FirebaseListObservable, FirebaseObjectObservable, AuthMethods, FirebaseApp } from 'angularfire2';
//Models
import { LoginModel } from '../models/login';

@Injectable()
export class LoginService {

    public user: any;
    public firebase: any;
    public gameid: String;

    constructor (
        private router: Router,
        public af: AngularFire,
        @Inject(FirebaseApp) firebase: any
    ){
        this.firebase = firebase;
    }

    setUser(user): void { 
        this.user = user;
        //update last activity
        if(this.user != undefined && this.user != null){
          this.af.database.object(`users/${this.user.uid}`).subscribe(user => { this.gameid = user.gameid }
        }
    }

Chat.service.ts <-- 这里崩溃了，因为 Login.service.ts 中的可观察对象尚未完成

//Angular
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
//Firebase
import { FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
//Services
import { LoginService } from '../services/login.service';
import { MembersService } from '../services/members.service';
//Models
import { ChatModel } from '../models/chat';

@Injectable()
export class ChatService {

  constructor (
      private loginService: LoginService,
      private membersService: MembersService,
      private router: Router
  ){}

    getLast(): Observable<any> {
        return this.loginService.af.database.list(this.loginService.gameid+`/chat/`)
    }

}

有人可以告诉我如何解决这个问题吗？

Answer 1

常见的方法是在 LoginService 中提供一个 Observable，所有其他服务都可以订阅，并且 LoginService 使用它来通知其他感兴趣的服务以及有关状态更改的组件。

@Injectable()
export class LoginService {
  private loginData:Subject = new BehaviorSubject();
  public loginData$ = this.loginData.asObservable();

  setUser(user): void { 
    this.user = user;
    //update last activity
    if(this.user != undefined && this.user != null){
      this.af.database.object(`users/${this.user.uid}`).subscribe(user => { this.gameid = user.gameid;
 this.loginData.next(...); }
    }
}

@Injectable()
export class ChatService {

  constructor (
      private loginService: LoginService,
      private membersService: MembersService,
      private router: Router
  ){
    loginService.loginData.filter(ld => ld != null).subscribe(res => 
      this.loginData = res;
      this.init(); // do additional initalization
    });
  }