angular 通信问题 layout里怎么能拿到页面触发事件返回的状态

Question

需求是这样
有个代办列表 如果有代办 需要在菜单上红点提示 代办列表中代办事项处理完红点消失

app中是页面

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 &copy; 2018</nz-footer> -->
    </nz-layout>
  </nz-layout>
</nz-layout>

怎么能知道代办页面中触发事件了 拿到未处理数量呢

Answer 1

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);
       })
    }
}