在同级组件之间共享数据答案

【问题标题】：Sharing data between same level components在同级组件之间共享数据
【发布时间】：2017-10-19 03:35:17
【问题描述】：

我检查了各种问题，这些问题涉及通过共享服务等其他几种方式在父/子之间以及同一级别组件之间传递数据。我正在尝试遵循共享服务模式来共享数据。我的简单共享服务如下，

import {Component, Injectable} from '@angular/core'
import * as models from '../_models/models';

import { Subject }    from 'rxjs/Subject';


@Injectable()
export class SharedService {
    // Observable
  private detailSource = new Subject<models.Detail>();

  // Observable number streams
  detail$ = this.detailSource.asObservable();

  // Service commands
  setDetail(value: models.TaskInstance) {
     this.detailSource.next(value);
  }
}

在我的登录组件中，我正在调用一个用于登录的 API，它返回一个对象，

login() {
    var task = this.api.getDetail().subscribe(
                (data) => this._detail = data,
                error =>{
                    console.log(error);
                },
                () => {
                    console.log("Detail retrieved successfully !");
                    this.sharedService.setDetail(this._detail);
                    this.router.navigate(['dashboard']); 
                }
    );
}

在我的登录组件中的上述登录函数中，我从 sharedService 调用 setTask 并设置从 API 检索的详细信息。

现在在仪表板组件中，我有以下代码，

constructor(private sharedSrvice: SharedService) {
    this.tempVariable = sharedSrvice.detail$.subscribe(
        objDetail => {
            this._detail = objDetail;
        },
        error =>{
            console.log("Error: " + error)
        },
        () => {
            console.log("Shared Service completed !");
        }
    );
}

问题是仪表板的构造函数内部没有任何反应。我在仪表板的构造函数中订阅了共享服务，但是没有达到我使用的 console.log，这意味着这不起作用。也许我把这一切都弄错了，或者做的事情不正确。我不确定，但是否需要在 NgModule 中使用此 SharedService 才能在组件之间共享？

【问题讨论】：

标签： angular angular2-routing angular2-services

【解决方案1】：

您应该创建一个提供此服务的模块，它将用于声明该服务在您的模块中提供并且仅在该模块中提供。

例子：

@NgModule({
   imports:[...],//Probably HttpModule here, as you are calling an API
   ...
   providers:[SharedService]
})
export class FooModule{}

然后，在你的 AppModule 中，导入这个模块

@NgModule({
   imports:[FooModule],
   ...
   providers:[]//Do not provide SharedService here, it's already in your FooModule.
})
export class AppModule{}

这将确保您的FooModule 的每个组件中都有一个SharedService 实例。

【讨论】：

感谢您的回复。让我试试这个。