Angular4 在组件之间传递信息

Question

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

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

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

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

Answer 1

您可以在服务中定义一个Subject，并在 header 组件中订阅它。每次在服务中更新数据时，只需调用 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得到你想要的数据。订阅()。

引用这个简单的 Plunker demo 。