Question

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

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

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

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

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

Answer 1

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

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

Answer 2

我不确定这是不是你想要的，但是如果你需要在兄弟路线上共享数据，你可以试试这个。

创建模块导入并声明模块中的服务

import { MyService } from './my.service’;

@NgModule({
  ...
  providers: [
    MyService
  ]
  …
})

在模块路由中声明服务意味着我们可以通过引用子路由来传递服务。不要在父组件中使用该服务

在子路径组件中，导入服务

import { MyService } from '../my.service’;

在应该使用服务的每个组件中，不要将服务添加到组件元数据中，因为我们已经将它添加到模块定义中。将服务添加到组件构造函数

export class MyChildRouteComponent implements OnInit {  
...
 constructor(
    private _myService: MyService,
    private _router: Router
  ) { }
 ...
}

如果您在一个子路由组件中设置服务属性，则可以从兄弟子组件中获取它。

Answer 3

您如何看待受Redux启发的 NgRx 解决方案？你可以在那里阅读更多内容 - https://github.com/ngrx/store

您将拥有一个应用程序商店，可以使用适当的组件进行订阅。所以 - 你可以在路线改变之前调度一个事件。这个解决方案只使用减速器，因此与使用商店不同，您的数据将是不可变的 - 这是下一个优势。

Angular 2：跨不同路线共享数据

3 个答案: