angular - 如何在 Angular 2 的不同服务中订阅可观察对象

Question

我有一项服务，可以简单说明用户是否登录。 它从另一个服务更新，该服务执行 http 请求以验证用户。

我想要一个导航栏组件来更新用户界面，以根据可观察对象 (BehaviorSubject) 向用户显示登录或注销按钮。

(在我的 Bootstrap 函数中，我正在注入(inject) Auth)

nav-main.component.ts

import {Auth} from '../services/auth.service';

constructor ( public _auth: Auth) {
   this._auth.check().subscribe(data =>{console.log(data)})
}

auth.service.ts

@Injectable()

export class Auth {
    subject: Subject<boolean> = new BehaviorSubject<boolean>(null);
    loggedIn:boolean = false;

    constructor(){
        this.subject.next(this.loggedIn);
    }

    login(id_token){
        ...
        this.loggedIn = true;
        this.subject.next(this.loggedIn);
    }

    check() {
        return this.subject.asObservable().startWith(this.loggedIn);     
    }
}

登录服务.ts

import {Injectable, Injector} from 'angular2/core';
import {Http,Headers} from 'angular2/http';
import {AppInjectorService} from './app-injector.service';
import {Auth} from './auth.service';
import {UserService} from './user.service'
import 'rxjs/Rx';
import {Observable}     from 'rxjs/Observable';

@Injectable()

export class LogInUserService {
  auth:Auth;
  injector:Injector;
  constructor(private http:Http) {
    // let injector: Injector= AppInjectorService();
    this.injector = Injector.resolveAndCreate([Auth]);

    this.auth = this.injector.get(Auth);
}

logInUser(data) {
...
return this.http.post(this._authUrl, body, { headers:headers})
    .map(function(res){ return <UserService> res.json().data;})
    .do(data => this.logIn(data))
    .catch(this.handleError);
}
//on success tell the auth.login the public key
logIn(data){
    this.auth.login(data.publicKey);
}

Answer 1

@Inject(Auth) _auth 看起来已经成功了。

nav-main.component.ts

import {Component, OnInit, Inject} from 'angular2/core';

_auth;

constructor(public _router: Router,
            public _service: IsActiveRouteService,
            @Inject(Auth) _auth){

    this._auth = _auth;//@Inject(Auth) _auth did the trick
}

ngOnInit() {
    this._auth.check()
                .subscribe(data =>{
                    console.log('nav init check() '+data)
    });
}

auth.service.ts

import {Injectable} from 'angular2/core';
import {Observable} from "rxjs/Observable";
import {Subject} from 'rxjs/Subject';
import {BehaviorSubject} from 'rxjs/Rx';


@Injectable()

export class Auth {
    isLoggedIn:boolean = false;
    logIn$: Subject<boolean> = new BehaviorSubject<boolean>(this.isLoggedIn);
    externalBS;

    constructor() {
        this.logIn$.asObservable();
        this.externalBS = this.logIn$;
    }


    login(id_token) {
        window.localStorage.setItem('id_token',id_token);
        this.isLoggedIn = true;
        this.logIn$.next(this.isLoggedIn);
    }


    logout() {
        window.localStorage.setItem('id_token','');
        this.isLoggedIn = false;            
    }

    check() {
        return this.externalBS.asObservable().startWith(this.isLoggedIn);
    }

}