使用 Angular 2 中的 Observable 和 Subject 在多个组件与服务之间进行通信 [英] Communication between multiple components with a service by using Observable and Subject in Angular 2

问题描述

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

所以，我想要实现的是:ComponentA 内的 button 的 onclick 通知其他组件，例如 ComponentB, ComponentC.

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

private isMenuOpenBS = new BehaviorSubject(false);切换菜单():无效{this.isMenuOpenBS.next(!this.isMenuOpenBS.getValue());}getMenuState(): Observable{返回 this.isMenuOpenBS.asObservable();}

然后让一个带有 provide menuService 的组件调用 this.menuService.toggleMenu()，它改变了 BehaviorSubject 的值.代码:

toggleMenu(): void {this.menuService.toggleMenu();this.menuService.isMenuOpenBS.subscribe((数据) =>{控制台日志(数据)},(e) =>{console.log(e)},() =>{console.log('完成')})}

还有一个 OnInit() subscribes 到 getMenuState() 的组件，它是一个 Observable，但是它仅在 OnInit() 上获取值.代码:

ngOnInit(): void {this.menuService.getMenuState().subscribe((数据)=>{this.messages = 数据；console.log('导航组件');},(e) =>{console.log(e)},() =>{console.log('完成')})}

complete 函数永远不会被调用.

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

--

所以，要多解释一点，问题是我可以看到 observable 具有 oninit 的第一个值，但没有其他值.之后没有错误没有完成或没有下一个"值是错误的，因为我从主题发送新值.最后，问题出在组件的提供者列表上，而不是 observable 或主题的问题，但在解决问题之前，不容易看出问题所在.

解决方案

一些事情...

1. 您不需要将 BehaviorSubject 作为 observable 返回，您应该可以毫无问题地订阅 observable.
2. 您不应在每次调用切换函数时都继续订阅该服务.通过这样做，您正在创建大量订阅.如果你采纳了我上面的建议，你可以只记录 getValue() 函数的返回值.

很高兴你解决了它！

I am new to rxjs, so I would like to ask a question regarding Angular 2, Observables and BehaviorSubject/Subject.

So, what I want to achieve is : onclick of a button inside a ComponentA to notify other components for example ComponentB, ComponentC.

What I did so far is to create a service:

private isMenuOpenBS = new BehaviorSubject(false);

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

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

Then having one component with provide menuService is calling the this.menuService.toggleMenu() which changes the value of the BehaviorSubject. Code :

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

And another component that OnInit() subscribes to the getMenuState() which is an Observable, but it get's values only on OnInit(). Code:

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

The complete function is never called.

Any ideas what am I doing wrong or if i am missing something in the logic ?

--

Edit : So, to explain a bit more the problem was that I could see the first value that the observable had oninit but nothing else. No error no complete after that or no "next" value which was wrong since I was sending new values from the subject. In the end the problem was with the provider list of the components and not a problem of observables or subjects, but before solving the problem it wasn't easy to see that the problem was there.

解决方案

A few things...

1. You don't need to return your BehaviorSubject as an observable, you should be able to subscribe to observables no issue.
2. You shouldn't keep on subscribing to the service every time the toggle function gets called. You're creating a lot of subscriptions by doing so. If you took my advice from above you can just log the return of the getValue() function.

Glad you resolved it though!

这篇关于使用 Angular 2 中的 Observable 和 Subject 在多个组件与服务之间进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！