根据下拉选择从另一个不相关的Angular组件更改数据

Question

我有不相关的组件。当我更改公司时，我需要从标题组件中显示与我从标题组件中选择的公司的数据匹配。目前，它的工作，当我在另一个页面，一旦访问该页面，它的变化，但我需要改变它的时间，当我选择一个公司从标题。

Header.ts

companyData: Company;
companyId;
getCompany() {
this.companyService.getCompanies().subscribe(x =>
this.companyData = x
);
}
changeCompany(companyId) {
this.systemFunction.changeCompany(companyId);
} 

共同service.ts

private companySource = new BehaviorSubject('');
currentCompany = this.companySource.asObservable(); 
changeCompany(companyId: number) {
this.companySource.next(String(companyId));
} 

Branch.ts

ngOnInit() {
this.systemFunction.currentCompany.subscribe(cid => this.companyId = cid);
this.systemFunction.changeCompany(this.companyId);
}
ngAfterViewInit() {
this.getBranches();
}
getBranches() {
this.branchService.getBranches().subscribe(b => {
Object.assign(this.branchData, b);
// tslint:disable-next-line:no-shadowed-variable
this.branchData = this.branchData.filter(b => b.CompanyId == this.companyId);
});
} 

Answer 1

如果我没有弄错的话，currentCompany就像是一个主题。至少你订阅了它。

所以你可以把分支的刷新调用也放到订阅中。

this.systemFunction.currentCompany.subscribe(cid => {
this.companyId = cid;
this.getBranches();
});

可能会在初始化时额外加载不必要的分支。如果是这样，你可以在afterviewit中删除getBranches调用。

Answer 2

我相信您希望在更改companyId后重新评估您的branchData?但是你的分支是它自己订阅机制的一部分，所以一旦getBranches()订阅被触发，你就会得到结果。

或者你需要直接对公司的变化做出反应，并在变化后更新分支机构，例如

ngOnInit() {
this.systemFunction.currentCompany.subscribe(cid => refreshCompany(cid));
this.systemFunction.changeCompany(this.companyId);
}
ngAfterViewInit() {
this.getBranches();
}
getBranches() {
this.branchService.getBranches().subscribe(b => {
this.branchData = ...;
this.refreshBranches();
});
}
refreshCompany(cid) {
this.companyId = cid;
this.refreshBranches();
}
refreshBranches() {
this.filtered = this.companyId ? 
this.branchData.filter(b => b.CompanyId == this.companyId) : [...this.branchData];
}