BehaviorSubject 订阅被调用两次

Question

I have two component that communicate using a BehaviorSubject . Here's a simple reprodution:

DashboardComponent:

this.service.setCheckIsTrue();

Service:

private $checkIsTrue = new BehaviorSubject<any>(null);
public checkIsTrueEvent = this.$checkIsTrue.asObservable();

public setCheckIsTrue(){
    this.$checkIsTrue.next(true);
}

Other component:

 this.composerService.checkIsTrueEvent
      .takeWhile(() => this.isAlive)
      .subscribe( res => {
        if(!!res && res){
          console.log("fired"); // <-- called twice
        }
      });

I have others BS that works prefectly fine, so I inspected the code and the function setCheckIsTrue() is called once. I could solve this problem using some rxjs operator, but it's not a real solve. Anyone has an idea about that happening?

Answer 1

When this happens to me I thrash about a bit until I realize that I've forgotten to unsubscribe in the component's ngOnDestroy(). Give that a try. :)

Answer 2

use condition

this.composerService.checkIsTrueEvent.takeWhile(() => this.isAlive).subscribe( res => {if('undefined' != typeof res){  
          console.log("fired");// <----called once }
});

Answer 3

You are using BehaviorSubject with initial value null which will notify all subscriber for first time. Then you setting the next value by this.$checkIsTrue.next(true);which is triggering the next notification.

If you are not bothered about the last value then you can simply use Subject instead of BehaviorSubject .

private $checkIsTrue = new Subject<any>();

Answer 4

According to my experience most of the time it depends on where you are going to call the function. Most of the time it will call twice and generate an error (sometimes) if you are using calling it in the constructor . You can call it inside ngOnInit() . So it won't generate any errors and won't call the function twice.

Also, I tried this one with BehaviorSubject and Subject noting changed. So you can try the above.