Angular：assets中JSON修改后组件不刷新，setInterval失效如何解决？

1. 首次加载有时不触发 #

你的setInterval是延迟1秒后才第一次执行请求，组件初始化时只启动了定时器，没有立即调用fetchPassDetails获取数据。如果首次加载的UI依赖这份数据渲染，就会出现初始无数据、看起来没触发的情况。

2. 修改JSON后有时失效 #

核心原因是浏览器静态资源缓存：生产环境下，浏览器会默认缓存assets目录下的静态文件（包括JSON）。即便你修改了服务器上的JSON文件，浏览器仍会优先读取本地缓存的旧内容，导致请求返回的还是旧数据，UI自然不会更新。

另外你的定时器清理逻辑存在问题：ngOnDestroy里只是把time设为null，并没有调用clearInterval(this.time)，会导致组件销毁后定时器仍在运行，造成内存泄漏，但这和修改后失效的直接关联不大。

先修复现有定时器的问题 #

改成立即执行一次请求，再启动轮询，同时正确清除定时器：

time: NodeJS.Timer;

ngOnInit() { 
  this.fetchPassDetailsOnce();
  this.startPolling();
}

ngOnDestroy() { 
  if (this.time) {
    clearInterval(this.time);
    this.time = null;
  }
}

private fetchPassDetailsOnce() {
  this._ymcaform.fetchPassDetails().subscribe(response => this.CONFIG = response);
}

private startPolling() {
  this.time = setInterval(() => {
    this._ymcaform.fetchPassDetails().subscribe(response => this.CONFIG = response);
  }, 1000);
}

解决浏览器缓存问题 #

在请求JSON的URL后添加动态时间戳参数，让每次请求的URL都不一样，绕过浏览器缓存：
假设你的fetchPassDetails方法请求的是assets/config.json，修改请求逻辑为：

fetchPassDetails() {
  const url = `assets/config.json?t=${Date.now()}`;
  return this.http.get(url);
}

更高效的替代方案（无需轮询） #

方案1：配置服务器缓存策略 #

如果是你自己部署的服务器，可以给assets下的JSON文件设置合适的缓存规则：

• 设置短时间的Cache-Control（比如max-age=60，即1分钟），到期后浏览器自动请求新内容
• 开启文件的ETag验证：服务器根据文件内容生成唯一标识，浏览器请求时携带旧ETag，服务器对比后若文件修改则返回新内容，否则返回304

方案2：使用Server-Sent Events (SSE) #

服务器端监听JSON文件的变化（比如用Node.js的fs.watch），一旦文件修改，就通过SSE主动向前端推送新的JSON内容。前端只需订阅SSE事件，收到新数据后直接更新UI，无需定时轮询，更高效。

方案3：Angular变更检测优化（如果适用） #

如果你的组件用了ChangeDetectionStrategy.OnPush，可能需要手动触发变更检测：

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

constructor(private cdr: ChangeDetectorRef) {}

// 收到新数据后
this.CONFIG = response;
this.cdr.detectChanges();

或者用async管道绑定数据，让Angular自动处理变更检测。

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