Angular中header组件下拉选公司后在branch组件筛选对应分支数据

针对header和branch两个无直接父子关系的组件联动需求，最通用的实现方式是通过共享服务+RxJS响应式流完成状态中转，具体实现步骤如下：

1. 创建全局共享服务 #

首先生成一个单例服务，用来存储和分发选中的公司ID：

# 执行Angular CLI命令生成服务
ng generate service services/company-share

服务代码如下：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 全局单例，所有组件共用同一个服务实例
})
export class CompanyShareService {
  // 存储选中的公司ID，默认值为空，会自动保存最新值
  private selectedCompanyId$ = new BehaviorSubject<string>('');
  // 对外暴露可观察对象，仅允许订阅，禁止外部直接修改流数据
  public companyIdChanged$ = this.selectedCompanyId$.asObservable();

  // 提供更新选中公司ID的方法
  updateCompanyId(companyId: string) {
    this.selectedCompanyId$.next(companyId);
  }
}

2. 修改Header组件，同步选中状态 #

在header组件中注入共享服务，选中公司时将ID同步到服务中：

import { CompanyShareService } from '你的服务路径/company-share.service';

companyData: [] = [];
companyId;

// 注入共享服务
constructor(
  private companyService: CompanyService,
  private companyShareService: CompanyShareService
) {}

getCompany() {
  this.companyService.getCompanies().subscribe(x => {
    Object.assign(this.companyData, x);
  });
}

changeCompany(companyId) {
  this.companyId = companyId;
  // 同步选中的公司ID到共享服务
  this.companyShareService.updateCompanyId(companyId);
} 

header组件的html代码无需修改。

3. 修改Branch组件，订阅状态变化 #

在branch组件中注入共享服务，监听公司ID变化自动触发筛选：

import { CompanyShareService } from '你的服务路径/company-share.service';
import { Subscription } from 'rxjs';

companyId;
branchData: any[] = [];
// 存储订阅对象，组件销毁时清理防止内存泄漏
private companyIdSub: Subscription;

constructor(
  private branchService: BranchService,
  private companyShareService: CompanyShareService
) {}

ngOnInit() {
  // 订阅公司ID变化事件
  this.companyIdSub = this.companyShareService.companyIdChanged$.subscribe(companyId => {
    if (companyId) {
      // 选中有效公司ID时触发分支筛选
      this.getBranches(companyId);
    } else {
      // 未选中公司时可自定义逻辑，比如清空分支列表/展示全部分支
      this.branchData = [];
    }
  })
}

getBranches(companyId) {
  this.branchService.getBranches().subscribe(b => {
    Object.assign(this.branchData, b);
    this.branchData = this.branchData.filter(b => b.CompanyId == companyId);
  });
}

// 组件销毁时清理订阅
ngOnDestroy() {
  this.companyIdSub?.unsubscribe();
}

可选优化方案 #

如果两个组件为直接父子关系，也可以用更轻量的@Input() + @Output()事件传递实现；如果项目已接入NgRx等状态管理库，也可以将选中的公司ID存入全局Store，效果和共享服务一致。

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