Angular中如何根据非关联组件下拉选择结果实时更新对应数据

问题根源 #

你当前的实现逻辑中，Branch组件仅在ngAfterViewInit生命周期执行了一次getBranches()，后续公共服务内的公司ID发生变更时，仅仅更新了组件内部的companyId变量，没有重新触发分支数据的拉取和过滤逻辑，因此不会实时更新数据。同时Branch组件ngOnInit里主动调用changeCompany属于多余逻辑，还可能覆盖Header组件选中的公司ID。

修复步骤 #

1. 优化公共服务（可选，规避类型匹配问题）

把BehaviorSubject的类型统一为number，避免字符串和数字比对时出现隐性错误：

// common service.ts
// 初始值可根据业务设置为默认公司ID，无默认值可设为null
private companySource = new BehaviorSubject<number | null>(null);
currentCompany = this.companySource.asObservable(); 

changeCompany(companyId: number) {
  this.companySource.next(companyId);
} 

2. 修改Branch组件逻辑，公司ID变更时自动刷新数据

在订阅公司ID的回调里直接触发数据刷新，同时添加取消订阅逻辑避免内存泄漏：

// Branch.ts
import { Subject, takeUntil } from 'rxjs';

// 新增销毁触发器，用于统一取消订阅
private destroy$ = new Subject<void>();

ngOnInit() {
  this.systemFunction.currentCompany
    .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
    .subscribe(cid => {
      // 过滤空值，避免发起无意义的接口请求
      if (cid === null || cid === undefined) return;
      this.companyId = cid;
      // 公司ID变更后立刻拉取匹配的分支数据
      this.getBranches();
    });
  // 删除原有多余的 this.systemFunction.changeCompany(this.companyId) 调用
}

// 可删除原有ngAfterViewInit逻辑，ngOnInit订阅到初始ID会自动触发数据拉取
ngAfterViewInit() {}

getBranches() {
  this.branchService.getBranches()
    .pipe(takeUntil(this.destroy$))
    .subscribe(b => {
      // 删除冗余的Object.assign操作，直接赋值过滤后的结果即可
      this.branchData = b.filter(item => item.CompanyId == this.companyId);
    });
}

ngOnDestroy() {
  // 触发销毁信号，取消所有未完成的订阅
  this.destroy$.next();
  this.destroy$.complete();
}

如果项目内还有其他和所选公司关联的组件，都参照Branch组件的修改方式，在订阅currentCompany的回调里触发对应的数据刷新方法，即可实现所有组件实时同步更新。

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