Angular中添加滚动事件监听时出现nativeElement未定义错误

看起来你遇到的问题主要来自三个方面：DOM元素获取时机不对、事件处理逻辑错误，以及事件监听无法正确移除。让我一步步帮你解决：

核心错误原因分析 #

1. DOM元素未就绪：在ngOnInit钩子中，组件的视图可能还没完全渲染，document.getElementById('sidenav')会返回undefined，调用addEventListener自然会报错。
2. 事件对象使用错误：你传递给onScroll的是字符串'$event'，而且原生滚动事件的event对象根本没有elementRef属性，这直接导致了nativeElement读取失败。
3. 监听函数引用不匹配：使用箭头函数()=> this.onScroll('$event')添加监听，每次创建的都是新的函数实例，后续removeEventListener无法找到对应的引用，无法正确移除监听，还会造成内存泄漏。

完整解决方案 #

1. 使用Angular的@ViewChild获取DOM元素 #

替代document.getElementById，让Angular帮你管理元素引用，确保在视图渲染完成后获取到有效元素：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef, AfterViewInit } from '@angular/core';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
  @ViewChild('sidenav') sidenavRef: ElementRef<HTMLElement>;
  private scrollListener: () => void; // 存储监听函数引用
  data: any[] = [];
  data_display: any[] = [];
  start = 6;
  end = 12;

  constructor(private cdr: ChangeDetectorRef) {}

  // 改用AfterViewInit，此时ViewChild已初始化完成
  ngAfterViewInit() {
    // 绑定监听函数，确保引用唯一
    this.scrollListener = () => this.onScroll();
    this.sidenavRef.nativeElement.addEventListener('scroll', this.scrollListener, true);
  }

  ngOnInit() {
    // 滚动监听逻辑移至ngAfterViewInit，此处可保留其他初始化代码
  }

  ngOnChanges(changes: SimpleChanges) { 
    this.data = changes.data.currentValue; 
    this.data_display = changes.data.currentValue.slice(0, 6); 
    // 重置分页参数，避免数据更新后分页混乱
    this.start = 6;
    this.end = 12;
  }

  ngOnDestroy() { 
    console.log('destroy');
    // 安全移除监听，避免元素已销毁时报错
    if (this.sidenavRef?.nativeElement) {
      this.sidenavRef.nativeElement.removeEventListener('scroll', this.scrollListener, true);
    }
  }

  onScroll(): void { 
    // 直接从ViewChild获取元素，无需从event中读取
    const element = this.sidenavRef.nativeElement;
    const top = element.scrollTop; 
    const total = element.scrollHeight; 
    const height = element.clientHeight; 

    if ((height + top) === total) { 
      // 避免切片超出数据长度，防止数组越界
      if (this.data_display.length < this.data.length) { 
        const sliceEnd = Math.min(this.end, this.data.length);
        this.data_display.push(...this.data.slice(this.start, sliceEnd)); 
        this.start += 6; 
        this.end += 6; 
      } 
      console.log('已滚动到底部，加载更多内容');
      this.cdr.detectChanges(); 
    } 
  }
}

2. 修改模板添加引用变量 #

在你的模板中，给侧边栏元素添加模板引用变量#sidenav，让@ViewChild能正确定位到它：

<!-- 假设这是你的侧边栏容器 -->
<div #sidenav class="sidenav">
  <!-- 你的内容列表 -->
  <div *ngFor="let item of data_display" class="list-item">{{ item }}</div>
</div>

关键修改说明 #

• ngAfterViewInit钩子：这是Angular官方推荐的获取视图元素的时机，此时组件的DOM已经完全渲染，@ViewChild能拿到有效的元素引用，彻底解决元素未就绪的问题。
• 独立的监听函数变量：把滚动监听函数存储为组件属性，确保添加和移除时使用同一个函数引用，解决无法移除监听导致的内存泄漏问题。
• 直接从ViewChild获取元素：原生滚动事件的event对象不包含elementRef，所以直接通过我们已经获取到的元素引用计算滚动参数，避免了原代码中的逻辑错误。
• 边界安全处理：在onScroll中添加了Math.min(this.end, this.data.length)，防止切片操作超出数据数组的长度，避免数组越界报错。

内容的提问来源于stack exchange，提问作者raj