Angular 15中如何取消window.cookieStore的change事件订阅？

首先要明确：window.cookieStore.addEventListener是标准Web API方法，它不会返回订阅对象，所以你获取到sub为undefined是正常的——它和Angular常用的RxJS订阅逻辑不一样，不能通过保存返回值来取消监听。

正确的取消方式是保存监听时传入的回调函数引用，之后用removeEventListener方法移除，参数必须和添加监听时完全匹配。

示例代码（Angular服务实现） #

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

@Injectable({ providedIn: 'root' })
export class CookieMonitorService implements OnDestroy {
  // 保存回调函数的引用，用于后续移除监听
  private cookieChangeHandler: EventListener;

  constructor() {
    // 定义回调函数并保存引用
    this.cookieChangeHandler = (event: CookieChangeEvent) => {
      // 你的Cookie变化处理逻辑
      console.log('Cookie updated:', event);
    };
    // 添加Cookie变化监听
    window.cookieStore.addEventListener('change', this.cookieChangeHandler);
  }

  // 组件销毁或手动调用时取消监听
  ngOnDestroy(): void {
    window.cookieStore.removeEventListener('change', this.cookieChangeHandler);
  }

  // 可选：手动触发取消监听的方法
  stopMonitoring(): void {
    window.cookieStore.removeEventListener('change', this.cookieChangeHandler);
  }
}

关键注意事项 #

• 必须使用同一个回调函数引用：如果在removeEventListener时传入新的匿名函数，浏览器无法匹配到已添加的监听，移除会失效。
• 若服务是全局注入的，ngOnDestroy仅在应用销毁时执行；如果需要在组件生命周期内提前取消，可调用自定义的stopMonitoring方法。

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