Angular FullCalendar在IE 11中点击刷新按钮无法更新的问题求助

我之前在项目里也碰到过Angular FullCalendar在IE11里的刷新兼容问题，结合你的场景，给你几个经过验证的解决方案：

1. 通过数组引用变更触发Angular变更检测 #

IE11对Angular的数组内容变更感知比较弱，直接清空数组再push新数据可能无法触发视图更新。你可以通过替换数组实例的方式来触发变更检测：

// 准备新的事件数组（这里可以换成你的新数据逻辑）
const newEvents = [
  { title: 'All Day Event', start: new Date(y, m, 1) },
  { title: 'Long Event', start: new Date(y, m, d - 5), end: new Date(y, m, d - 2) },
  { id: 999, title: 'Repeating Event', start: new Date(y, m, d - 3, 16, 0), allDay: false },
  { id: 999, title: 'Repeating Event', start: new Date(y, m, d + 4, 16, 0), allDay: false },
  { title: 'Birthda...' }
];

// 直接替换原数组，让Angular感知到引用变化
this.calEvents = [...newEvents]; // 或者直接赋值 this.calEvents = newEvents;

如果需要先清空再逐步添加，也可以先创建空数组实例，再填充：

this.calEvents = []; // 创建新的空数组实例
// 填充新数据
this.calEvents.push(...newEvents);

2. 直接调用FullCalendar的原生API更新事件 #

绕过Angular的变更检测，直接操作FullCalendar实例，这种方式在IE11里兼容性更稳定：

首先在组件中获取FullCalendar实例：

import { Component, ViewChild } from '@angular/core';
import { FullCalendarComponent } from '@fullcalendar/angular';

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild(FullCalendarComponent) calendarComponent: FullCalendarComponent;

  // 刷新按钮点击事件
  onRefreshClick() {
    // 获取FullCalendar API实例
    const calendarApi = this.calendarComponent.getApi();
    
    // 清空所有现有事件
    calendarApi.removeAllEvents();
    
    // 准备新事件数据
    const newEvents = [
      // 你的新事件内容
      { title: 'All Day Event', start: new Date(y, m, 1) },
      // ...其他事件
    ];
    
    // 逐个添加新事件
    newEvents.forEach(event => {
      calendarApi.addEvent(event);
    });
  }
}

3. 处理日期对象的IE11兼容性 #

IE11对Date对象的某些构造方式支持不佳，比如如果你的事件日期是字符串格式，可能会解析失败。建议统一用Date对象构造，并确保参数正确（注意月份是从0开始的），或者转成IE11能识别的ISO字符串：

// 转成ISO格式字符串，IE11可以正确解析
start: new Date(y, m, 1).toISOString(),
end: new Date(y, m, d - 2).toISOString()

4. 手动触发Angular变更检测 #

如果上述方法还是无效，可能是IE11里Angular的自动变更检测未触发，你可以手动调用ChangeDetectorRef强制检测：

首先注入ChangeDetectorRef：

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

constructor(private cdr: ChangeDetectorRef) {}

然后在更新事件数组后调用：

this.calEvents = [...newEvents];
this.cdr.detectChanges(); // 强制触发变更检测

额外注意事项 #

• 确保你的项目已经配置了ES5转译：在tsconfig.json中设置"target": "es5"，并引入必要的polyfill（比如core-js），因为IE11不支持ES6+语法（如箭头函数、扩展运算符）。
• 检查FullCalendar的版本：部分旧版本的@fullcalendar/angular对IE11的支持有缺陷，建议升级到官方标注支持IE11的最新版本。

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