Angular4在组件之间传递信息

问题描述：

我的应用程序有一个Header部分和body部分，我使用路由以便正文部分可以在页面之间导航，而标题总是在那里。Angular4在组件之间传递信息

页眉的数据来自两个服务productService.getProducts()和priceService.getPrices()，它能够在两个productService.addProduct(produceID)页面，productService.removeProduct(productID)进行修改。

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

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

当服务中的数据更新时，您可能需要触发一个事件，以便在发生这种情况时头可以侦听（订阅）。 – Nugu

我同意@Nugu是否使用/了解observable（s）？如果你还没有一个使用redux的状态树，这看起来像是一个坚实的用例。看看Redux模式。 – Chris

可能是https://stackoverflow.com/a/45668262/2708210 –

答

您可以在您的服务中定义一个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。

的副本添加到这个优秀的答案，remmeber在视图被销毁时取消订阅您的主题。 – Faisal

@Faisal感谢**取消订阅**，这可以防止内存泄漏问题。但是对于OP总是显示“标题”的具体要求可能没有必要。 – Pengyy

答

我认为，为了更有效地，你需要考虑使用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在组件之间传递信息

相关推荐