Angular Material内联日历选择器selected绑定视图未同步调整问题

复现代码 #

按照官方文档对MatCalendar组件的selected属性做双向绑定的初始实现如下：

<mat-card>
  <mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>
<code>{{ selected }}</code>

export class AppComponent implements OnInit, AfterViewInit {
  selected = new Date(1999, 1, 1);

  ngOnInit() {
    this.selected = new Date(1999, 2, 2);
  }

  ngAfterViewInit(): void {
    this.selected = new Date(1999, 3, 3);
  }
}

问题表现 #

绑定的selected值可以正常同步更新，但在生命周期钩子中动态修改绑定的日期值后，日历组件不会自动调整视图定位到已设置的选中日期。

问题原因 #

这个现象不属于配置遗漏，是MatCalendar的原生设计逻辑：

• [(selected)]双向绑定仅负责同步「选中日期」的状态值，不会主动触发日历视图的跳转定位
• 日历默认仅在用户手动点击选择日期时，才会自动定位到选中日期所在视图

正确实现方式 #

通过模板引用获取MatCalendar组件实例，在程序化修改selected值后，主动调用实例公开的goToDate()方法触发视图跳转即可：

1. 给日历组件添加模板引用变量

<mat-card>
  <!-- 新增#calendar模板变量用于获取组件实例 -->
  <mat-calendar #calendar [(selected)]="selected"></mat-calendar>
</mat-card>
<code>{{ selected }}</code>

2. 在组件类中通过@ViewChild获取日历实例，修改选中值后调用跳转方法

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { MatCalendar } from '@angular/material/datepicker';

export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('calendar') calendarRef: MatCalendar<Date>;
  selected = new Date(1999, 1, 1);

  ngOnInit() {
    this.selected = new Date(1999, 2, 2);
  }

  ngAfterViewInit(): void {
    this.selected = new Date(1999, 3, 3);
    // 主动触发视图跳转到目标选中日期
    this.calendarRef.goToDate(this.selected);
  }
}

注意事项 #

ngOnInit阶段组件视图还未完成初始化，无法获取到MatCalendar实例，如果需要在初始化阶段就设置日期并跳转，建议将赋值+跳转逻辑统一放到ngAfterViewInit生命周期中执行，避免出现实例为空的报错。

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