Question

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

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);
  }
}

在我的Login组件中，我正在调用Login for Login，它返回一个对象

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']); 
                }
    );
}

在我的Login组件中的上述登录功能中，我从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来在组件之间共享？

Answer 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{}

这将确保您SharedService的每个组成部分都有FooModule个实例。

在相同级别组件之间共享数据

1 个答案: