Angular2 Observable 范围问题答案

【问题标题】：Angular2 Observable scoping issuesAngular2 Observable 范围问题
【发布时间】：2017-05-29 08:57:57
【问题描述】：

我以为我了解 javascript 作用域，但我想我必须离开某个地方......

我创建了一个 observable（用于会话超时类型功能），它递减一个数字并每秒发出一次。我可以订阅这个罚款，并看到数据变化很大。我的问题是有时观察者之外的事件会“重置”计时器；但是，观察者内部使用的值不反映此重置。

我原以为通过使用粗箭头语法 this 会被保留，但显然我在某处不正确。

observable 在构造函数中创建，作为单例注入到模块中。

@Injectable()
export class TimeoutService {

  private _internalTimer: number;    
  private _logoutThreshold: number;
  private _timer$: Observable<number>;

  constructor(@Inject(DOCUMENT) private document: any) {

    this._logoutThreshold = 3000;

    document.onkeypress = this.resetTimer;

    this._internalTimer = this._logoutThreshold;    

    this._timer$ = new Observable(observer => {

      observer.next(this._internalTimer)

      setInterval(() => {
        this._internalTimer--;
        console.log("timer in observer", this._internalTimer);
        observer.next(this._internalTimer);
      }, 1000);

    });
  }

  resetTimer() {
    this._internalTimer = this._logoutThreshold;
    console.log("timer in reset", this._internalTimer);
  }    
}

在这个例子中，“观察者中的计时器”效果很好，从 3000 开始，每秒倒计时；但是，“重置中的计时器”始终未定义。这令人倍感困惑，因为我认为在最奇怪的情况下它只是一个常数 3000，因为我在 Observable 之外的构造函数中分配了它。

如何确保我在这个例子中总是在同一个范围内？

【问题讨论】：

标签： javascript angular rxjs

【解决方案1】：

哈，按照正常情况，在发布问题后的几分钟内，我就解决了问题。结果我确实正确理解了粗箭头中的范围，只是没有在文档侦听器上使用它。

变化

document.onkeypress = this.resetTimer;

到

document.onkeypress = e => this.resetTimer();

让一切完美运行！

【讨论】：