Angular中使用CookieStore监听Cookie变化事件的实现问题

你遇到的这个报错是TypeScript类型检查导致的——默认情况下，TypeScript的Window类型定义里并没有包含CookieStore API的相关属性，所以编译器会认定window.cookieStore是不存在的。下面给你几种在Angular 15里顺利使用CookieStore的方案，从快速解决到规范封装都有：

一、快速临时解决：类型断言 #

最简单的方式就是用类型断言，直接告诉TypeScript“我确定这个属性存在”，修改你的代码如下：

ngOnInit() {
   
    if ('cookieStore' in window) {
        // 用as any断言跳过类型检查
        (window as any).cookieStore.addEventListener('change', event => {
            event.changed.forEach(change => {
                console.log(`Cookie changed: ${change.name} = ${change.value}`);
            }); 
        });
    } else {
        console.log('Cookie Store API is not supported in this browser.');
    }
}

这种方法适合快速验证功能，缺点是会丢失类型提示，不够规范。

二、规范方案：扩展Window类型定义 #

如果希望整个项目里都能获得cookieStore的类型提示，我们可以扩展TypeScript的全局Window接口：

1. 在你的项目src目录下创建一个types文件夹，里面新建window.d.ts文件，内容如下：

interface Window {
  cookieStore: CookieStore;
}

2. 打开tsconfig.json，确保include数组包含这个类型文件，比如：

{
  "compilerOptions": {
    // 其他配置...
  },
  "include": [
    "src/**/*.ts",
    "src/types/**/*.d.ts"
  ]
}

这样修改后，TypeScript就会识别window.cookieStore的类型，你写代码的时候还能获得自动提示，也不会再报类型错误了。

三、更优雅的方式：封装成Angular服务 #

为了让CookieStore的使用更符合Angular的最佳实践，你可以把它封装成一个全局服务，方便在各个组件里复用：

1. 创建CookieStoreService #

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

@Injectable({
  providedIn: 'root'
})
export class CookieStoreService {
  private cookieStore: CookieStore | null = null;

  constructor() {
    // 初始化时检查浏览器支持情况
    if ('cookieStore' in window) {
      this.cookieStore = window.cookieStore as CookieStore;
    }
  }

  // 监听Cookie变化的方法
  listenForCookieChanges(callback: (event: CookieChangeEvent) => void): void {
    if (this.cookieStore) {
      this.cookieStore.addEventListener('change', callback);
    } else {
      console.log('Cookie Store API is not supported in this browser.');
    }
  }

  // 可以额外封装CookieStore的其他方法，比如获取、设置、删除Cookie
  async getCookie(name: string): Promise<CookieListItem | undefined> {
    return this.cookieStore?.get(name);
  }

  async setCookie(name: string, value: string, options?: CookieSetOptions): Promise<void> {
    if (this.cookieStore) {
      await this.cookieStore.set({ name, value, ...options });
    }
  }

  async deleteCookie(name: string): Promise<void> {
    this.cookieStore?.delete(name);
  }
}

2. 在组件中使用服务 #

import { Component, OnInit } from '@angular/core';
import { CookieStoreService } from './cookie-store.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  constructor(private cookieStoreService: CookieStoreService) {}

  ngOnInit(): void {
    this.cookieStoreService.listenForCookieChanges(event => {
      event.changed.forEach(change => {
        console.log(`Cookie changed: ${change.name} = ${change.value}`);
      });
      // 也可以处理删除的Cookie
      event.deleted.forEach(deleted => {
        console.log(`Cookie deleted: ${deleted.name}`);
      });
    });
  }
}

最后还要提醒一句，CookieStore API目前只在较新的浏览器版本中支持，你代码里的浏览器兼容判断已经做得很好了，如果需要兼容更老的浏览器，可能需要额外实现定时轮询Cookie的 fallback 方案。

备注：内容来源于stack exchange，提问作者fascynacja