Angular4在组件之间传递信息答案

【问题标题】：Angular4 passing information between componentsAngular4在组件之间传递信息
【发布时间】：2018-01-25 07:51:01
【问题描述】：

我的应用程序有一个 Header 部分和 body 部分，我正在使用路由，以便 body 部分可以在页面之间导航，而 header 始终存在。

标头的数据来自productService.getProducts() 和priceService.getPrices() 两个服务，可以在productService.addProduct(produceID)、productService.removeProduct(productID) 中的两个页面上进行修改。

服务中的数据正在正确更新，但我需要一种方法来告诉标头再次调用getProducts() 和getPrices()。

我以为我可以从页面获得回调，但您似乎不能在路由中包含回调？

【问题讨论】：

您可能需要在服务中的数据更新时触发一个事件，以便标头可以在发生这种情况时侦听（订阅）。
我同意@Nugu 你在使用/理解 observable(s) 吗？如果您还没有使用 redux 的状态树，这似乎是一个可靠的用例。查看 Redux 模式。
可能是stackoverflow.com/a/45668262/2708210的副本

标签： angular callback routes components

【解决方案1】：

您可以在您的服务中定义一个Subject 并在您的标头组件中订阅它。每次更新服务中的数据时，只需致电Subject.next()。

subject: Subject<string> = new Subject();

updateData() {
  // your own logic
  this.subject.next();
}

然后你可以在Subject.subscribe() 做你想做的事情（比如调用一些其他的函数）。

product$ = this.service.subject;   // Subject defined at your service

constructor() {
  this.product$.subscribe(() => {
    console.log('product data has been updated!');
  });
}

另外，如果你只是想得到最新的数据，你可以通过subject.next(newestData)转换更新的数据，然后你可以在subject.subscribe()得到你想要的。

参考这个简单的Plunker demo。

【讨论】：

添加到这个出色的答案，当视图被破坏时，请记住unsubscribe您的主题。
@Faisal 感谢关于 unsubscribe 的注释，这可以防止内存泄漏问题。但是对于 OP 对Header 的特定要求，可能没有必要始终显示。

【解决方案2】：

我认为为了更有效地解决您的问题，您需要考虑使用ngrx，这样您可以在标题中订阅商店，然后在相关操作被触发时，您可以在标题中运行do stuff。

它可能看起来像

调度一个改变 store 的 action
this.store.dispatch(new yourthing.SomeAction());
订阅更改： this.store.select(fromYourThing.getYourThing) .subscribe((thing) => { // do stuff }); });

有关ngrx的更多详细信息，请查看以下链接：

https://blog.angular.io/announcing-ngrx-4-87df0eaa2806
https://blog.nrwl.io/ngrx-patterns-and-techniques-f46126e2b1e5
https://blog.nrwl.io/using-ngrx-4-to-manage-state-in-angular-applications-64e7a1f84b7b

也可以在本地运行这个example-app，这样你就可以看到它是如何运作的。

【讨论】：