如何从指令中观察服务内部的简单变量变化?

时间:2017-04-25 12:20:13

标签: angular angular2-services angular2-directives angular2-components

我有data变量的简单服务:

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

@Injectable()
export class MyService {

  private _data:number;

  get data(): number {
    return this._data;
  }
  set data(value: number) {
    this._data = value;
  }

}

现在从一个指令我想抓住每当有人设置我的变量时:

this.myService.data = 12345;

我试图通过订阅来做到这一点,但遗漏了一些语法:

this.myService.data.subscribe(res => console.log(res));

我错过了什么?我应该宣布obserabvle吗?为什么和哪里? 我不确定是否适合此问题,因为这不是HTTP请求,更改很简单。

1 个答案:

答案 0 :(得分:4)

你可以这样做:

在您的服务中,添加一个EventEmitter:

dataUpdated : EventEmitter<number> = new EventEmitter();

然后在设置数据时,在setData:

的末尾添加
this.dataUpdated.emit(this.data);

它允许通知订阅变量的组件并发送新值(您可以发送任何想要的内容)。

最后在你的组件中,你可以这样通知:

constructor
(
    private service: Service
)

ngOnInit()
{
    this.service.dataUpdated.subscribe
    (
        (data: number) =>
        {
            //setData used, you can use new data if needed
        }
    );
}