如何实时刷新另一个组件中的一个组件？

Question

您好我有两个组件A＆amp; B。在A我正在下载包含汽车模型。在B我还有一个下拉包含型号年份。如果我从下拉选择一辆汽车A将显示与所选汽车相关的可用年份。所有工作正常很好，但我面临一个问题，从B，如果我正在改变任何特定的年份一个组件没有立即刷新。页面重新加载后只有新的值。我怎么能解决这个问题。 Ngonint（）调用不是一个好方法，因为我有足够的方法吗？请帮助

Answer 1

您可以使用服务。

您可以使用角色官方文档Component Interaction中描述的服务在组件之间进行通信。

锄头有帮助。

Answer 2

您可以使用主题。

让我们考虑一个接口dateRange

IDateRange {
   availableYear: string
}

在commonService.ts中创建一个主题，如下所示

private updateLists = new Subject<IDateRange>();
updateListsObs = <Observable<IDateRange>>this.updateLists;

updateListFn(_dateRange : IDateRange ) {
 this.updateLists.next(_dateRange);
}

在组件A中注入CommonService并订阅可观察的updateListsObs，如下所示

this.CommonService.updateListsObs
.subscribe(
(response) => {console.log("You will get date range in response which can be used to filter Car list in Component A ")}
)

然后在组件B中注入CommonService并调用UpdateListFn

let dateRange: IDateRange = {
 availableYear: "2018"
}
this.CommonService.updateListFn(dateRange);

有关详细说明，请参阅 this link