[英]Angular4 passing information between components
My App has a Header section and body section, I am using routes so that the body section can navigate between pages, while the header is always there. 我的应用程序具有标题部分和正文部分,我使用的是路由,以便正文部分可以在页面之间导航,而标题始终在页面中。
The data for the header comes from two services productService.getProducts()
and priceService.getPrices()
which is able to be modified on two of the pages productService.addProduct(produceID)
, productService.removeProduct(productID)
. 标头的数据来自两个服务
productService.getProducts()
和priceService.getPrices()
,可以在两个页面productService.addProduct(produceID)
, productService.removeProduct(productID)
。
The data in the services is updating correctly, but I need a way to tell the header to call getProducts()
and getPrices()
again. 服务中的数据正在正确更新,但是我需要一种方法来告诉标头再次调用
getProducts()
和getPrices()
。
I thought I could have a callback from the pages, but it seems you cannot include a callback in a route? 我以为我可以在页面中进行回调,但是似乎您不能在路由中包括回调?
You can define a Subject
in your service and subscribe to it in your header's component. 您可以在服务中定义一个
Subject
,然后在标题的组件中进行订阅。 Every time you update data in service, just call Subject.next()
. 每次在服务中更新数据时,只需调用
Subject.next()
。
subject: Subject<string> = new Subject();
updateData() {
// your own logic
this.subject.next();
}
Then you can do what you want(such as call some other functions) at Subject.subscribe()
. 然后,您可以在
Subject.subscribe()
处执行所需的操作(例如调用其他函数Subject.subscribe()
。
product$ = this.service.subject; // Subject defined at your service
constructor() {
this.product$.subscribe(() => {
console.log('product data has been updated!');
});
}
Also, If you just want to get the newest data, you can just transform updated data via subject.next(newestData)
, and then you can get what you want at subject.subscribe()
. 另外,如果只想获取最新数据,则可以通过
subject.next(newestData)
转换更新的数据,然后可以在subject.subscribe()
处获取所需的内容。
refer this simple Plunker demo . 请参阅此简单的Plunker演示 。
I think in order to solve your problem more efficiently you need to consider of using ngrx this way you can subscribe for a store in your header and then on related action gets fired you can run do stuff
in your header. 我认为,为了更有效地解决您的问题,您需要考虑以这种方式使用ngrx,您可以在标头中订阅商店,然后在触发相关操作时,可以在标头中运行
do stuff
。
It might be looking something like 它可能看起来像
Dispatch an action that mutate the store 派遣使商店变异的动作
this.store.dispatch(new yourthing.SomeAction());
Subscribe for a change: this.store.select(fromYourThing.getYourThing) .subscribe((thing) => { // do stuff }); });
订阅更改:
this.store.select(fromYourThing.getYourThing) .subscribe((thing) => { // do stuff }); });
this.store.select(fromYourThing.getYourThing) .subscribe((thing) => { // do stuff }); });
For more details on ngrx
check these links: 有关
ngrx
更多详细信息, ngrx
检查以下链接:
https://blog.angular.io/announcing-ngrx-4-87df0eaa2806 https://blog.angular.io/announcing-ngrx-4-87df0eaa2806
https://blog.nrwl.io/ngrx-patterns-and-techniques-f46126e2b1e5 https://blog.nrwl.io/ngrx-patterns-and-techniques-f46126e2b1e5
https://blog.nrwl.io/using-ngrx-4-to-manage-state-in-angular-applications-64e7a1f84b7b https://blog.nrwl.io/using-ngrx-4-to-manage-state-in-angular-applications-64e7a1f84b7b
Also run this example-app locally so you can see how it all goes in action. 另外,请在本地运行此示例应用程序 ,以便您了解其运行情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.