angular - 将元素绑定(bind)到 Angular 服务中的BehaviorSubject

Question

我有一个小型共享 Angular 服务，如下所示:

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 属性绑定(bind)到 View 中的元素。我当前正在使用以下代码片段尝试在 View 中进行绑定(bind):

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

该属性最初是绑定(bind)的，但不响应连续的更改。我想要的是 侧边栏状态: 在 SidebarService 内部调用侧边栏切换()方法时进行更新。

有什么想法吗？

Answer 1

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

我通过将 @Component 装饰器中提供程序的声明从共享 SidebarService 的两个组件移动到 app.module.ts 来解决这个问题，如下所示:

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

这意味着我的绑定(bind)正在观察 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());
    }
}