使用 Angular 2 中的 Observable 和 Subject 实现多个组件与服务之间的通信

Question

我是 rxjs 新手，所以想问一个关于 Angular 2、Observables 和 BehaviorSubject/Subject 的问题。

所以，我想要实现的是：button 中的onclick ComponentA 以通知其他组件，例如ComponentB、ComponentC。

到目前为止我所做的是创建一个service：

private isMenuOpenBS = new BehaviorSubject(false);

  toggleMenu(): void {
    this.isMenuOpenBS.next(!this.isMenuOpenBS.getValue());
  }

  getMenuState(): Observable<boolean> {
    return this.isMenuOpenBS.asObservable();
  }

然后拥有一个带有provide menuService 的组件正在调用this.menuService.toggleMenu()，这会改变BehaviorSubject 的值。代码：

toggleMenu(): void {
    this.menuService.toggleMenu();
    this.menuService.isMenuOpenBS.subscribe(
      (data) => {
        console.log(data)
      },
      (e) => {console.log(e)},
      () => {console.log('completed')}
    )
  }

还有另一个组件，OnInit() subscribes 到 getMenuState()，这是一个 Observable，但它仅在 OnInit() 上获取值。代码：

ngOnInit(): void {
    this.menuService.getMenuState().subscribe(
      (data)=>{
        this.messages = data;
        console.log('nav component');
      },
      (e) => {console.log(e)},
      () => {console.log('completed')}
    )
  }

complete 函数永远不会被调用。

任何想法我做错了什么或者我在逻辑中遗漏了什么？

--

编辑：所以，为了解释更多问题，我可以看到 observable 具有 oninit 的第一个值，但没有别的。之后没有错误没有完成，或者没有“下一个”值，这是错误的，因为我从主题发送了新值。最终问题出在组件的提供者列表上，而不是 observables 或 subject 的问题，但在解决问题之前，很难看出问题所在。

Answer 1

您可以通过子父关系或通过服务在组件之间进行通信。

https://angular.io/docs/ts/latest/cookbook/component-communication.html

但是有一种方法可以通过ngrx/store。这个概念类似于 Redux。你可以试试看。

Answer 2

我粘贴的代码没有有问题。 我的问题是我创建的 2 components 在他们的 providers 数组中注入了“MenuService”，所以我没有单例。

我从两个组件的providers 数组中删除了该服务，它起作用了！

PS：这个http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject 是一个有用的教程，可以帮助我解决providers 数组的问题。

Answer 3

一些事情......

1. 您无需将 BehaviorSubject 作为可观察对象返回，您应该能够订阅可观察对象，没有问题。
2. 您不应该在每次调用切换功能时都继续订阅服务。通过这样做，您将创建大量订阅。如果您采纳了我上面的建议，您只需记录 getValue() 函数的返回即可。

很高兴你解决了它！