監視angular2中服務和更新組件的更改，打印稿

Question

我有一個組件和一個服務。每當我的服務中的布爾屬性發生更改時，我都想通知我的組件。我想我應該使用rxjs中的Observable和Observer。

我做了服務和組件不按預期工作。

AppComponent.ts

import { Component } from '@angular/core'; 
import { UserData } from 'user-data.service'; 
@Component({ 
    selector: 'app', 
    templateUrl: '<div></div>' 
}) 
export class AppComponent { 
    isLoggedIn: boolean; 
    constructor(public userData: UserData) { 
     userData.isLoggedIn.subscribe(isLoggedIn => { 
      this.isLoggedIn = isLoggedIn; 
     });//??? 
    } 
    ??? 
} 

UserDataService.ts

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs'; 

@Injectable() 
export class UserData { 
    isLoggedIn: Observable<boolean>; // ??? 
    observer: Observer<boolean>; // ??? giving an error in tsc (Type 'Observer' is not generic) 
    constructor() { 
     this.isLoggedIn = new Observable(observer => 
      this.observer = observer 
     ).share(); ///??? 
    } 
    changeLoginStatus (isLoggedIn: boolean) { // function called from login/logout actions 
     this.observer.next(isLoggedIn); // ??? not sure 
    } 

}

Answer 1

最簡單的方法是使用一個帶有BehaviorSubject初始值：

export class UserData { 
    isLoggedIn: Subject<bool> = new BehaviorSubject(false); 
    changeLoginStatus (isLoggedIn: boolean) { 
    this.isLoggedIn.next(isLoggedIn); // ??? not sure 
    } 
} 

參見https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

由於@KonradGarus建議的，Subject應當保密。

export class UserData { 
    private isLoggedIn: Subject<bool> = new BehaviorSubject(false); 
    isLoggedIn$ = this.isLoggedIn.asObservable(); 
    changeLoginStatus (isLoggedIn: boolean) { 
    this.isLoggedIn.next(isLoggedIn); 
    } 
} 

上面還掛菜譜包含一個完整的例子，其中Subject將保密。