监视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将保密。