如何跟踪 Angular 中另一个组件中一个组件中发出的值的变化

Question

Component A shows notifications count. Whereas, Component B gets live count of notificationss which I'm emitting it and subscribing the value in Component A . For some reason, the count gets updated only when I make page transition.

In a gist, here's what I'm doing.

Component B

ngOnInit(){
 this.handleRealTimeCount();
}

handleRealTimeCount() {
  this.countSvc
    .getCount()
    .subscribe((res: any) => {
      this.countSvc.setCount(
        res.count
      );
    });
}

Component A

  this.getUnreadCount();
}

getUnreadCount() {
  this.countSvc.unreadCount.subscribe((res) => {
    this.notificationsCount = res;
  });
}

In my Count Service , I'm using EventEmitter variables like this

export class CountService {
  unreadCount = new EventEmitter();

  setCount(count) {
    this.unreadCount.emit(count);
  }

Could you please let me know how could I get the real time count updated whenever a notification is received.

Answer 1

Can you try with BehaviorSubject rather than EventEmitter

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class CountService  {   
  constructor() { } 
  private paramSource = new BehaviorSubject(0);
  unreadCount = this.paramSource.asObservable();
  setCount(param:number) { this.paramSource.next(param)}    
}

Answer 2

You are almost there. I will suggest using a BehaviourSubject in the service rather than an EventEmitter and also subscribe directly in the template of your components using the async pipe.

The Service

@Injectable({
  providedIn: 'root'
})
export class CountService {
  private _unreadCount$: BehaviourSubject<number> = new BehaviourSubject<number>(0);
  get unreadCount$ ():Observable <number> {
  return this._unreadCount$;
  }

  increaseCount(amount:number) {
  this._unreadCount.pipe(take(1)).subscribe((count: number) => {
  this._unreadCount.next(count + amount);
})

}

Component A

count$: Subject<number> = new Subject<number>();

getUnreadCount() {
  this.countSvc.unreadCount$.subscribe((count) => {
    this.count$.next(count);
  });
}

increase(count: number) {
this.countSvc.increaseCount(count);
}

// Template of Component A

<div *ngIf="count$ | async as count">
You have {{count}} notifications
</div>
<button (click)="increase(1)">Increase</button>

Basically that's it. By following the above approach your components will be synced, just make sure to inject the service and subscribe to the unreadCount$ property