注意 Angular 2 服务功能的变化答案

【问题标题】：Watch for changes in Angular 2 services function注意 Angular 2 服务功能的变化
【发布时间】：2017-05-19 07:56:49
【问题描述】：

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

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

@Injectable()
export class HomeService {

name:string;

constructor() { }

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

}

我在 组件 A 中设置参数并在 组件 B 中获取它。我想要的是继续观察 getParams() 在第二个组件中的变化。我在 component A 中设置了参数值，但我无法在 Component B 中获得这些值。意味着在 组件 B 中它不关注变化。

【问题讨论】：

我添加了一个答案来满足您的需求。请看一下。您必须使用 observable 才能使其正常工作，因此它订阅参数，并且每当进行更改时，它都会更新组件中的值

标签： angular angular2-services

【解决方案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 将得到更新。

组件B：

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

这个解决方案应该适合你。

【讨论】：

感谢它对我有用。只需要详细研究 observable 的更多信息。
@AhmerKhan 所以，这是组件交互。经历这将帮助您决定可以将哪种技术用于不同的场景。快乐编码。 angular.io/docs/ts/latest/cookbook/component-communication.html
这是一个很好的解决方案，对我来说效果很好。

【解决方案2】：

考虑使用基于订阅的服务重新逻辑化它。在组件中，您必须订阅基于源的 observable 变量，并且每当您在源上调用 next 方法时，observable 正在触发，并且订阅了此 observable 的组件将收到新的/更新的值并在 subscribe 回调中您可以定义如何使用该值。欲了解更多信息，请查看此article。

【讨论】：