需要帮助禁用 mat-calendar Angular Material 组件中的年/月组合框答案

【问题标题】：Need Help Disabling Year/month combobox in mat-calendar Angular Material Component需要帮助禁用 mat-calendar Angular Material 组件中的年/月组合框
【发布时间】：2021-09-06 18:28:52
【问题描述】：

早上好。我目前有以下内联 mat-calendar 角度材料组件。我不需要这个组合框，但我确实需要箭头。如何禁用它？我已经尝试了几件事，但没有任何效果！

这是我目前使用的代码。

  <mat-card>
    <mat-calendar
      [(selected)]="selectedDate"
      (selectedChange)="selectedDateChange($event)"
      [minDate]="loadedMinHoliday"
      [maxDate]="loadedMaxHoliday"
      [dateClass]="dateClass()"
      [startAt]="startAt"
    ></mat-calendar>
  </mat-card>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您需要:host ::ng-deep 才能访问由<mat-calendar> 生成的.mat-calendar-period-button 的DOM 元素并覆盖其CSS 样式规则。

注意：

确保在::ng-deep 之前包含:host 选择器。如果 ::ng-deep 组合器在没有 :host 伪类选择器的情况下使用，样式可以渗透到其他组件中。

备注： 这个答案是为了隐藏月份年份按钮。

.component.css

:host ::ng-deep .mat-calendar-period-button {
  display: none;
}

Sample Solution on StackBlitz

参考文献

(deprecated) /deep/, >>>, and ::ng-deep

【讨论】：

嗨，感谢@Yong Shun 的快速回答，它运行良好。不过，我注意到这是引用当前年份的唯一方法。你知道有什么方法可以只留下一年吗？谢谢！
您可以参考Customizing the parse and display formats。这是创建的demo。但是怀疑一旦你显示月份按钮，该按钮将不会被禁用，因为没有控制/属性来禁用它。