如何使用Temporal API实现Angular日历的月份连续增减

DevOps 小满

2026-8-20

解决方案

你的核心问题在于初始化时仅计算了一次next/previous月份，点击按钮后没有更新当前月份状态，且每次渲染都会追加新元素而非替换旧内容。以下是重构后的代码，实现连续月份增减：

核心修改点

仅维护currentMonth作为唯一的月份状态，避免冗余的next/previous变量
抽离通用的日期渲染方法，减少重复代码
每次渲染前清空日历容器，避免日期叠加

修改后的完整代码

currentMonth = Temporal.Now.plainDateISO();

// 初始化渲染当前月份
ngOnInit() {
  this.renderMonth(this.currentMonth);
}

private renderMonth(date: Temporal.PlainDate) {
  const container = this.calendarData.nativeElement;
  // 清空容器内旧的日期元素
  container.innerHTML = '';
  
  const daysInMonth = date.daysInMonth;
  for (let i = 1; i <= daysInMonth; i++) {
    const calendarDates = this.renderer.createElement('div');
    this.renderer.addClass(calendarDates, 'dates');
    this.renderer.setProperty(calendarDates, 'innerText', i);
    this.renderer.appendChild(container, calendarDates);
  }
}

onStartMonth() {
  // 重置为当前系统月份
  this.currentMonth = Temporal.Now.plainDateISO();
  this.renderMonth(this.currentMonth);
}

onNextMonth() {
  // 更新当前月份为下一个月
  this.currentMonth = this.currentMonth.add({ months: 1 });
  this.renderMonth(this.currentMonth);
}

onPreviousMonth() {
  // 更新当前月份为上一个月
  this.currentMonth = this.currentMonth.subtract({ months: 1 });
  this.renderMonth(this.currentMonth);
}