Communication between multiple components with a service by using Observable and Subject in Angular 2

问题

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.

回答1:

You can communicate between the components with child parent relationship or through the service.

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

But there is a way through ngrx/store. This concept is similar to Redux. you can try it.

回答2:

There was nothing wrong with the code I pasted. My issue was that the 2 components that I created had injected 'MenuService' in their providers array, so I didn't have singleton.

I removed the service from the providers array from both components and it worked!

PS: This http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject was a useful tutorial to realise the issue that I had with the providers array.

回答3:

A few things...

You don't need to return your BehaviorSubject as an observable, you should be able to subscribe to observables no issue.
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!

来源：https://stackoverflow.com/questions/44269107/communication-between-multiple-components-with-a-service-by-using-observable-and

标签

angular

observable

angular2-services

angular2-observables

behaviorsubject