如何从指令中观察服务内的简单变量更改？

Posted 2023-02-22

【中文标题】如何从指令中观察服务内的简单变量更改？

【英文标题】：How to watch from directive on a simple variable changes inside a service?

【发布时间】：2017-09-22 10:58:27

【问题描述】：

我有一个带有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));

我错过了什么？我应该声明可观察的吗？为什么和在哪里？ 我不确定这个问题是否正确，因为这不是 HTTP 请求，所以更改很简单。

【参考方案1】：

你可以这样实现：

在你的服务中，放置一个 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
        
    );

【讨论】：

非常感谢。这是一个简单的解决方案！再次感谢

很高兴它对您有所帮助。 :)

顺便说一句-它被更改 3 次是有原因的吗？

你的意思是 setData 被调用了 3 次？你确定你只调用一次 setData 吗？

我有多个指令实例，但每个实例都应该有一个代码吗？