角度サービス

Question

にBehaviorSubjectに要素をバインド私は以下のように見える小さな共有角度サービスがあります。

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

@Injectable() 
export class SidebarService { 
    private _isOpen: BehaviorSubject<boolean> = new BehaviorSubject(false); 

    constructor() { 
     this._isOpen.subscribe(val => { 
      console.log(`isOpen: ${val}`); 
     }); 
    } 

    public get isOpen() { 
     return this._isOpen.asObservable(); 
    } 

    toggle() { 
     this._isOpen.next(!this._isOpen.getValue()); 
    } 
} 

を私はビューの要素に.isOpenプロパティをバインドしたいと思います。私は現在、ビューの結合を試みるために次のコードを使用しています：プロパティは、最初に結合され

<p>Sidebar State: {{sidebarService?.isOpen | async}}</p> 

しかし、連続変化に対応していません。私が欲しいのはですサイドバー状態：は、サイドバーのtoggle（）メソッドがサイドバーサービス内で呼び出されたときに更新されます。

アイデア？

Answer 1

この問題は、SidebarServiceの複数のインスタンスを実行していることが原因でした。

私はそうのようなapp.module.tsにSidebarServiceを共有二つの成分から@Componentデコレータでのプロバイダのための宣言を移動することによって、問題を修正：

@NgModule({ 
    declarations: [ 
     // ... 
     SidebarComponent, 
     // ... 
    ], 
    imports: [ /* ... */ ]) 
    ], 
    // Line below was duplicated in two components, 
    // causing multiple instances... 
    providers: [SidebarService], // <-- 
    bootstrap: [AppComponent] 
}) 

をこれは私がして結合することを意味Observableの異なるインスタンス全体の変化をすべて一緒に観察します。

私も.asObservable（）呼び出しが完全に不要であるので、次のように結果SidebarServiceが今に見えることが判明：

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

@Injectable() 
export class SidebarService { 
    private _isOpen: BehaviorSubject<boolean>; 

    constructor() { 
     this._isOpen = new BehaviorSubject(true); 
    } 

    public get isOpen() { 
     return this._isOpen; 
    } 

    toggle() { 
     this._isOpen.next(!this._isOpen.getValue()); 
    } 
}