如何从另一个组件实时刷新一个组件？ [复制]

Question

您好，我有两个组件 A&B。在 A 中，我有一个包含汽车型号的下拉菜单。在 B 中，我还有一个包含车型年份的下拉菜单。如果我从下拉菜单 A 中选择一辆车，将显示与该所选汽车相关的可用年份。一切正常很好，但是如果我要更改任何特定年份 A 组件不会立即刷新，我将面临 B 的一个问题。页面重新加载后只会获取新值。我该如何解决这个问题。 Ngonint() 调用不是一个好方法，因为我里面有足够的方法？请帮助

Answer 1

您可以为此使用服务。

您可以使用 Angular 官方文档 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 ")}
)

然后在你的 Component B 中注入 CommonService 并调用 UpdateListFn

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

详细说明可以参考 this link