Question

我有一个名为 HomeService 的服务，在该服务中，我正在设置并获取一些工作正常的数据。这是我服务的代码。

import { Injectable } from '@angular/core';

@Injectable()
export class HomeService {

name:string;

constructor() { }

setParams(val) {
      this.name = val;
}
getParams() {
    return this.name;
}

}

我在组件A 中设置params并将其设置在组件B 中。我想要的是继续观察 getParams（）以改变第二个组件。我正在设置组件A 中的params值，但我无法在组件B 中获得这些值。 组件B 中的意思是不注意更改。

Answer 1

要跟踪name属性的更改，您必须使用observables。如下更改您的服务。

<强>主页服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class HomeService {

    private nameSource = new Subject<any>();

    name$ = this.nameSource.asObservable();

    setParams(val) {
        this.nameSource.next(val);
    }

}

在您希望更改名称的组件B中，它始终保留订阅服务中的名称。因此，无论何时在服务中更改名称（当您为组件A设置名称时），您都可以跟踪更改，组件B将更新。

<强>以componentB：

import { Component, OnInit, OnDestroy} from '@angular/core';
import 'rxjs/add/operator/takeWhile';
import { HomeService } from '[add path of home service here]';

export class ComponentBComponent implements OnInit, OnDestroy{

    private alive: boolean = true;
    private name: string;

    constructor(
        private homeService: HomeService;
    ) {
        homeService.name$.takeWhile(() => this.alive).subscribe(
            name=> {
                this.name = name;
        });

    }

    ngOnInit() {
        // Whatever to happen OnInit
    }

    ngOnDestroy() {
        this.alive = false;
    }

}

请注意，takeWhile()和alive用于prevent memory leaks.

从您将名称设置为家庭服务的任何地方

this.homeService.setParams(name);

此解决方案应该适合您。

Answer 2

考虑使用基于订阅的服务对其进行重新逻辑化。在组件中，您必须订阅基于源的observable变量，并且每当您在源上调用next方法时，observable都会触发，并且订阅此可观察对象的组件将接收新的/更新的值并且在里面subscribe回调您可以定义您对该值的处理方式。有关详细信息，请查看此article。

注意Angular 2服务功能的变化

2 个答案: