如何在调用API时简单禁用Angular mat-calendar组件？

当调用API加载选中日期对应的数据时，需要临时禁用mat-calendar组件，但该组件没有原生的disabled属性。尝试过dateFilter方案，但因为已经存在其他日期过滤逻辑，会大幅增加过滤器的管理复杂度，所以放弃了这个思路。

最终采用CSS方案实现禁用，步骤如下：

1. 给mat-calendar添加条件类 #

在模板中通过状态变量控制是否添加禁用类，比如用isLoading标识API请求状态：

<mat-calendar [class.calendar-disabled]="isLoading"></mat-calendar>

2. 添加禁用样式 #

在组件样式或全局样式文件中写入以下CSS：

.calendar-disabled {
  pointer-events: none;
  opacity: 0.6;
}

• pointer-events: none 会完全阻止组件的所有鼠标交互（点击、悬停等）
• opacity: 0.6 是视觉层面的禁用提示，让用户直观感知组件处于不可操作状态

这个方案的好处是无需修改现有业务逻辑，不会和已有的dateFilter冲突，实现成本极低，完全满足临时禁用的需求。

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