javascript – Angular 2：跨不同路由共享数据

我在SO中搜索过类似的问题,但我没有找到任何解决我具体案例的问题.有许多技术可以在角度组件之间共享数据,我已经阅读了有关组件通信的文章： https://angular.io/docs/ts/latest/cookbook/component-communication.html

但是,这里描述的技术都不适合我,因为我的组件在不同的路线上.本文主要描述父子组件通信,有些情况可能适用于兄弟组件,只要它们同时加载.

我的情况与Angular 2 Heroes教程非常相似：我有一条路线显示一个包含客户列表的表(而不是英雄).当用户点击特定客户时,我触发路线更改以显示包含所选客户(而非英雄)数据的表单.

英雄教程执行服务调用以检索选定的英雄数据,但我想避免无用的额外AJAX调用,因为这些数据已经在内存中.我只想将选定的客户数据传递给客户表单组件,以便立即显示.

我正在考虑一个“全局会话”服务,我可以存储和检索我想要的任何对象,但我不确定这是一个好主意.还有其他更适当的方法吗？

解决方法

使用主应用程序文件提供的服务,然后在您想要获取/设置将在整个应用程序中可用的数据时注入它

main.app.ts

@Component({
...
  providers:[yourDataService]
...
})

其他组件

import {yourDataService} from '...';

@Component({
...
providers:[]// we must use provider from main file
...
})
export class someComponent{

  contructor(private myData:yourDataService){}

}

从主应用程序文件中使用提供程序很重要,因为如果您在每个组件中提供服务,您将拥有另一个服务实例,当然每个服务中都有不同的数据

您还可以使用observables在某些数据发生更改时收到通知

欲了解更多信息,请查看hierarchical injections或tree injector

原文地址：https://www.jb51.cc/js/151281.html