在 angular2、typescript 中观察服务和更新组件的变化

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 是保密的。