Angular 12父组件监听多个子组件事件更新导航栏库存计数的方案

方案选择说明 #

优先选择订阅服务事件通知的方案，而非监听子组件事件，原因如下：

• 你的父组件通过<router-outlet>加载子组件，无法直接在模板中绑定子组件的@Output事件，硬实现需要额外处理路由组件实例，复杂度高
• 服务事件方案耦合度更低，后续新增操作商品的子组件时，无需修改Layout组件代码，仅需在新组件的增删逻辑中触发事件即可
• 跨多服务、多组件的状态同步场景下，全局事件通知是Angular生态的标准实现方式

具体实现步骤 #

步骤1：创建全局共享的事件通知服务 #

// item-update-notify.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ItemUpdateNotifyService {
  // 商品变更事件流
  private itemChangedSubject = new Subject<void>();
  public itemChanged$ = this.itemChangedSubject.asObservable();

  // 触发商品变更事件
  emitItemChanged(): void {
    this.itemChangedSubject.next();
  }
}

步骤2：子组件增删操作成功后触发事件 #

修改增删逻辑，操作成功后调用通知服务：

// AddItem1.component.ts
constructor(
  private Categorie1Service: Categorie1Service,
  private notifyService: ItemUpdateNotifyService
) {}

addItem(){
  this.Categorie1Service.addItem().subscribe(() => {
    // 新增成功后触发变更通知
    this.notifyService.emitItemChanged();
  })
}

// DeleteItem.component.ts
constructor(
  private Categorie2Service: Categorie2Service,
  private notifyService: ItemUpdateNotifyService
) {}

DeleteItem(){
  this.Categorie2Service.DeletItem().subscribe(() => {
    // 删除成功后触发变更通知
    this.notifyService.emitItemChanged();
  })
}

步骤3：Layout组件订阅事件刷新导航栏 #

// Layout.component.ts
import { Subscription } from 'rxjs';

constructor(private notifyService: ItemUpdateNotifyService) {}
private itemChangeSub?: Subscription;

ngOnInit(): void {
  this.prepareNavbar()
  // 订阅商品变更事件，收到通知就刷新导航栏数量
  this.itemChangeSub = this.notifyService.itemChanged$.subscribe(() => {
    this.prepareNavbar();
  })
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy(): void {
  this.itemChangeSub?.unsubscribe();
}

内容的提问来源于stack exchange，提问作者Hyperion