Angular communication problem: how can you get the status returned by the page trigger event in layout

the demand is like this
there is an agent list. If there is an agent on the menu, you need to be prompted by the red dot in the agent list. After the red dot is processed, the red dot disappears

app is the page

layout.html

<nz-layout class="layout-basic">
  <nz-header class="layout-basic__head">
    <a class="layout-basic__logo" [routerLink]="["/"]">
      <img src="/logo.jpg"/>
      <h1 class="layout-basic__title"></h1>
    </a>
    <nz-dropdown nzPlacement="bottomRight">
      <div nz-dropdown>
        <nz-avatar nzShape="square" nzIcon="anticon anticon-user"></nz-avatar>
        {{ username }}
      </div>
      <ul nz-menu>
        <li nz-menu-item (click)="onClickLogout()">
          <i class="anticon anticon-logout"></i> 
        </li>
        <li nz-menu-item (click)="onClickLogoutReset()">
          <i class="anticon anticon-user"></i> 
        </li>
      </ul>
    </nz-dropdown>
  </nz-header>
  <nz-layout>
    <nz-sider class="layout-basic__aside">
      <ul nz-menu nzMode="inline">
        <!-- <ng-container *ngFor="let route of routes">
          <li *ngIf="route.path && route.data?.name" nz-menu-item [nzSelected]="isRouteSelected(route)" [routerLink]="["/" + route.path]">{{ route.data.name }}</li>
        </ng-container> -->
        <ng-container *ngFor="let item of menu">
          <li *ngIf="!item.son&&item.action_type <3" nz-menu-item [nzSelected]="isMenuSelected(item)" [routerLink]="["/" + item.action_url]">{{ item.action_name }}
          </li>
          <li *ngIf="item.son&&item.action_type<3" nz-submenu>
            <div title>
                <i class="task_dot" *ngIf="item.action_id==21"></i>
                {{ item.action_name }}
            </div>
            <ul>
              <ng-container *ngFor="let sonItem of item.son">
                <li *ngIf="sonItem.action_type < 3" [nzSelected]="isMenuSelected(sonItem)" nz-menu-item (click)="jumpHandle(sonItem)">
                  <i class="task_dot" *ngIf="sonItem.action_url=="upcoming-tasks/overview""></i>
                  {{ sonItem.action_name }}
                </li>
              </ng-container>
            </ul>
          </li>
        </ng-container>
      </ul>
    </nz-sider>
    <nz-layout class="layout-basic__main">
      <nz-breadcrumb *ngIf="menu&&is_content_show">
        <nz-breadcrumb-item>
          <i class="anticon anticon-home" [routerLink]="["/"]"></i>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item *ngFor="let item of breadcrumb">
          <a [routerLink]="item.href">{{ item.title }}</a>
        </nz-breadcrumb-item>
      </nz-breadcrumb>
      <nz-content>
        <router-outlet *ngIf="menu&&is_content_show"></router-outlet>
      </nz-content>
      <!-- <nz-footer>Copyright  2018</nz-footer> -->
    </nz-layout>
  </nz-layout>
</nz-layout>

how do you know if an event is triggered on the agent page and get the outstanding number

class DataService{ countSubject$; getCount(){ this.http.get('/api').subscribe(res=>this.countSubject$.next(res)); } setCount(count){ this.countSubject$.next(count); } } class ListComp{ count; constructor(private data:DataService){} onInit(){ this.data.countSubject$.subscribe(count=>{ this.count = count; }); this.data.getCount(); } } class PageComp{ constructor(private data:DataService, private op:OpService){} opSomething(){ //do your this.op.xx().subscribe(res=>{ // success this.data.countSubject$.setCount(res.count); }) } }