Question

我的应用程序有一个标题部分和正文部分，我正在使用路径，以便正文部分可以在页面之间导航，而标题始终在那里。

标头的数据来自两个服务Number.MAX_SAFE_INTEGER和productService.getProducts()，可以在priceService.getPrices()，productService.addProduct(produceID)两个页面上修改。

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

我以为我可以从页面进行回调，但似乎你不能在路线中包含回调？

Answer 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 。

Answer 2

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

它可能看起来像

发送改变商店的动作
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，这样您就可以了解它是如何运作的。

Angular4在组件之间传递信息

2 个答案: