注意Angular2服务功能的变化

我有一个名为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中的意思是不注意变化.

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

主页服务:

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

@Injectable()
export class HomeService {

    private nameSource = new Subject();

    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用来防止内存泄漏.

从您设置名称到家庭服务的任何地方,

this.homeService.setParams(name);

此解决方案应该适合您.