在角服务

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> 

的属性最初约束力，但不响应的连续变化。我想要的是补充工具栏状态：在SidebarService内调用边栏toggle（）方法时进行更新。

任何想法？

Answer 1

该问题是由运行多个SidebarService实例引起的。

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

这意味着，我的结合是：

我通过移动声明的提供者从两个组件@Component装饰是共享SidebarService到app.module.ts像这样固定的问题一起观察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()); 
    } 
}