如何获得＆＃34;这个＆＃34;在Angular2中窗口中的滚动事件监听器中的关键字？

Question

我在我的组件类中有一个函数，我附加了滚动事件监听器。我这样做：

private _scrollListener(event){
    console.log("inside the scroll listener; this: ",this);
    this._zone.run(() => {
        this.checkForLazyLoad = !this.checkForLazyLoad;
    })
}

ngOnInit() {
    window.addEventListener("scroll", this._scrollListener);
}

问题在于＆＃34;这个＆＃34;私有函数中的关键字＆＃34; _scrollListener＆＃34;指向窗口对象。我怎样才能获得班级的价值？实例里面的滚动事件监听器？

Answer 1

ngOnInit() {
    window.addEventListener("scroll", this._scrollListener.bind(this);
}

或者可能是更好的解决方案

@HostListener('window:scroll', ['$event'])
private _scrollListener(event){
    console.log("inside the scroll listener; this: ",this);
    this._zone.run(() => {
        this.checkForLazyLoad = !this.checkForLazyLoad;
    })
}

通过这种方式，您无法取消注册该事件，但在删除该组件时它会自动取消注册。

Answer 2

我会使用以下内容：

private _scrollListener(event){
  console.log("inside the scroll listener; this: ",this);
  this._zone.run(() => {
    this.checkForLazyLoad = !this.checkForLazyLoad;
  })
}

ngOnInit() {
  window.addEventListener("scroll", (event) => {
    this._scrollListener(event);
  });
}

这是因为你引用了这个函数，所以你失去了它的执行上下文（即组件本身）。这样您就可以保留this关键字。

使用TypeScript小心bind方法：

• https://basarat.gitbooks.io/typescript/content/docs/tips/bind.html

Answer 3

我通过简单地使用箭头函数解决了这个问题：

private _scrollListener(event){
    console.log("inside the scroll listener; this: ",this);
    this._zone.run(() => {
        this.checkForLazyLoad = !this.checkForLazyLoad;
    })
}

ngOnInit() {
    window.addEventListener("scroll", (event) => {
        this._scrollListener(event);
    });
}