Angular SSR：如何监听滚动事件为mat-toolbar设置CSS类

方案一：手动注册滚动事件监听（替代HostListener） #

HostListener在SSR环境下可能因初始化时机问题导致判断失效，改用AfterViewInit钩子在浏览器环境下手动注册监听是更可靠的方式：

1. 组件中注入PLATFORM_ID并实现生命周期钩子：

import { Component, AfterViewInit, OnDestroy, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements AfterViewInit, OnDestroy {
  isScrolled = false;
  private scrollHandler?: () => void;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 定义滚动处理函数
      this.scrollHandler = () => {
        // 获取滚动距离，兼容不同浏览器
        const scrollTop = window.scrollY || document.documentElement.scrollTop;
        // 可根据需求调整滚动阈值
        this.isScrolled = scrollTop > 50;
      };

      // 注册滚动监听
      window.addEventListener('scroll', this.scrollHandler);
      // 初始化时主动触发一次，避免页面加载时状态异常
      this.scrollHandler();
    }
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，防止内存泄漏
    if (isPlatformBrowser(this.platformId) && this.scrollHandler) {
      window.removeEventListener('scroll', this.scrollHandler);
    }
  }
}

2. 模板中绑定CSS类：

<mat-toolbar [class.scrolled]="isScrolled">
  <!-- 工具栏内容 -->
</mat-toolbar>

3. 在SCSS中定义scrolled类的样式：

.mat-toolbar.scrolled {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  // 其他需要的样式
}

方案二：使用Renderer2注册监听（更符合Angular最佳实践） #

Angular的Renderer2提供抽象的DOM操作接口，避免直接依赖window对象，更适配SSR环境：

import { Component, AfterViewInit, OnDestroy, Inject, Renderer2 } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements AfterViewInit, OnDestroy {
  isScrolled = false;
  private removeScrollListener?: () => void;

  constructor(
    private renderer: Renderer2,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 通过Renderer2注册滚动监听
      this.removeScrollListener = this.renderer.listen('window', 'scroll', () => {
        const scrollTop = window.scrollY || document.documentElement.scrollTop;
        this.isScrolled = scrollTop > 50;
      });
      // 初始化触发一次
      this.removeScrollListener?.();
    }
  }

  ngOnDestroy(): void {
    // 调用Renderer返回的移除函数即可销毁监听
    this.removeScrollListener?.();
  }
}

关键注意事项 #

• 避免在constructor中访问window：必须等到AfterViewInit钩子触发后再操作DOM或window，此时组件视图已初始化，且能确保在浏览器环境中执行。
• 处理Hydration状态同步：SSR渲染时服务端无法获取滚动状态，客户端初始化时必须主动触发一次滚动处理函数，避免页面hydrate后样式闪烁。
• 清理监听事件：组件销毁时务必移除滚动监听，防止内存泄漏。

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