Angular 2組件聽着服務中的變化

Question

我有一個關於變化檢測的簡單問題。

我有一個組件和一個布爾內部的（全局）服務。 如何讓組件偵聽該布爾值並在該布爾變化時執行一個函數？

謝謝！

Answer 1

根據布爾更改的方式，您可以在服務上將其公開爲Observable<boolean>，然後在組件中訂閱該流。你的服務看起來是這樣的：

@Injectable() 
export class MyBooleanService { 
    myBool$: Observable<boolean>; 

    private boolSubject: Subject<boolean>; 

    constructor() { 
     this.boolSubject = new Subject<boolean>(); 
     this.myBool$ = this.boolSubject.asObservable(); 
    } 

    ...some code that emits new values using this.boolSubject... 
} 

然後在你的組件，你會有這樣的事情：

@Component({...}) 
export class MyComponent { 
    currentBool: boolean; 

    constructor(service: MyBooleanService) { 
     service.myBool$.subscribe((newBool: boolean) => { this.currentBool = newBool; }); 
    } 
} 

現在取決於你需要與布爾值做什麼，你可能需要做一些其他的東西讓你的組件更新，但這是使用observable的要點。

另一種選擇是在模板中使用異步管道，而不是顯式訂閱構造函數中的流。同樣，這取決於你需要用bool值做什麼。

Answer 2

山姆的回答是完全正確的。我只想補充一點，你也可以利用一個打字稿二傳手自動觸發更改事件：

@Injectable() 
export class MyBooleanService { 
    myBool$: Observable<boolean>; 

    private boolSubject: Subject<boolean>; 

    constructor() { 
     this.boolSubject = new Subject<boolean>(); 
     this.myBool$ = this.boolSubject.asObservable(); 
    } 

    set myBool(newValue) { 
     this._myBool = newValue; 
     this.boolSubject.next(newValue); 
    } 
}