Angular导航栏滚动变色时报Cannot read properties of null (reading 'classList')如何解决

• 生命周期使用错误：ngOnInit执行阶段组件模板DOM还未完成挂载，此时调用document.getElementById('header')可能返回null。如果组件销毁后没有移除滚动事件监听器，回调触发时DOM已被移除，也会返回null，直接访问classList就会抛出类型错误。
• 缺少空值校验：获取DOM元素后没有判断是否为null就直接操作属性，是报错的直接原因。
• 事件监听器未销毁：滚动事件绑定在全局window上，组件销毁后没有解绑，既会造成内存泄漏，也会触发DOM不存在时的调用报错。

快速修复版（兼容原有写法） #

将生命周期钩子替换为DOM挂载完成后触发的ngAfterViewInit，增加空值判断，同时在组件销毁时移除滚动监听器，代码示例如下：

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class YourComponent implements AfterViewInit, OnDestroy {
  // 存储滚动回调函数，用于销毁时解绑
  private scrollCallback?: () => void;

  ngAfterViewInit(): void {
    this.scrollCallback = () => {
      const nav = document.getElementById('header');
      // 元素不存在直接终止逻辑
      if (!nav) return;
      if (window.scrollY >= 30) {
        nav.classList.add('scroll-header');
      } else {
        nav.classList.remove('scroll-header');
      }
    }
    window.addEventListener('scroll', this.scrollCallback);
  }

  ngOnDestroy(): void {
    // 组件销毁时解绑全局滚动事件
    if (this.scrollCallback) {
      window.removeEventListener('scroll', this.scrollCallback);
    }
  }
}

Angular最佳实践版 #

使用Angular提供的@ViewChild获取DOM元素，避免依赖全局ID，防止ID重复导致的获取错误：

1. 首先修改模板代码，给导航栏增加模板引用变量：

<nav #headerNav>
  <!-- 原有内容不变 -->
</nav>

2. 修改TS代码，使用@ViewChild获取元素：

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

@Component({
  // 你的原有组件配置
})
export class YourComponent implements AfterViewInit, OnDestroy {
  // 通过模板引用变量获取导航栏元素
  @ViewChild('headerNav') headerNav?: ElementRef<HTMLElement>;
  private scrollCallback?: () => void;

  ngAfterViewInit(): void {
    this.scrollCallback = () => {
      const navElement = this.headerNav?.nativeElement;
      if (!navElement) return;
      window.scrollY >= 30 ? navElement.classList.add('scroll-header') : navElement.classList.remove('scroll-header');
    }
    window.addEventListener('scroll', this.scrollCallback);
  }

  ngOnDestroy(): void {
    if (this.scrollCallback) {
      window.removeEventListener('scroll', this.scrollCallback);
    }
  }
}

原有样式和模板的其他逻辑不需要修改，修改后即可消除控制台报错，功能运行也不会受到影响。

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