typescript - Angular2/TypeScript - 变量未更改

Question

看起来我的变量的 isInfinitiveScrollLoaderEnabled 值在到达页面底部时没有改变。如果我把它放在 ngOnInit 方法的开头，它就改变成功了。

有什么问题吗？

export class SomeClass {
  private isInfinitiveScrollLoaderEnabled: boolean;

  constructor() {
    this.isInfinitiveScrollLoaderEnabled = false;
  }

  ngOnInit() {
    window.onscroll = (event) => {
      if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
        console.log('Bottom of page');
        this.isInfinitiveScrollLoaderEnabled = true;
      }
    };
  }
}

Answer 1

Angular 提供了一种简单的方法来监听 window 或 document 上的事件:

@Component({
  selector: 'some-class',
  // alternative to @HostListener below
  // host: {'(window:scroll)':'onScroll($event')},
  ...
})
export class SomeClass {
  private isInfinitiveScrollLoaderEnabled: boolean;

  constructor() {
    this.isInfinitiveScrollLoaderEnabled = false;
  }

  @HostListener('window:scroll', ['$event'])
  onScroll(event) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      console.log('Bottom of page');
      this.isInfinitiveScrollLoaderEnabled = true;
    }
  }
}

对于命令式方式，请参阅 Programmatically (un)register to event with Angular 2