将事件监听器添加到整个文档时出错

Question

我有一个函数可以在滚动条移动时执行一些操作。我已经使用 id 将事件监听器添加到该文档中，但它给出了错误

ERROR TypeError: Cannot read property 'nativeElement' of undefined

  ngOnInit() {
    document.getElementById('sidenav').addEventListener('scroll',()=> this.onScroll('$event'),true);  
    // window.addEventListener('scroll',this.onScroll,true);

  }

  ngOnChanges(changes: SimpleChanges) {
    this.data = changes.data.currentValue;
    this.data_display = changes.data.currentValue.slice(0, 6);
  }

  ngOnDestroy() {
    console.log('destroy')
    document.getElementById('sidenav').removeEventListener('scroll',()=> this.onScroll('$event'),false);
    // window.removeEventListener('scroll',this.onScroll,false)
  }

  // @HostListener('document:scroll', ['$event'])
  onScroll(event): void {
    const top = event.elementRef.nativeElement.scrollTop;
    const total = event.elementRef.nativeElement.scrollHeight;
    const height = event.elementRef.nativeElement.clientHeight;
    if ((height + top) === total) {
      if (this.data_display.length <= this.data.length) {
        this.data_display.push(...this.data.slice(this.start, this.end));
        this.start += 6;
        this.end += 6;
      }
      console.log('yes')
      this.cdr.detectChanges();
    }
  }

Answer 1

在 Angular 中，您不能使用 addEventListener 方法直接添加事件监听器。您可以使用@HostListener（这是最首选的方式）添加它，如下所示：

@HostListener('window:scroll', ['$event'])
scrollEvent(event) { 
    // Statements
 }

您可以按照以下方式执行另一种方法，但当组件被销毁时不会删除此回调：

window.addEventListener("scroll", this.onScroll, true);