Angular 日期选择器 - 动态更新 MAT_DATE_FORMATS

# Angular 日期选择器 - 动态更新 MAT_DATE_FORMATS

typescript
import { Component, Inject } from '@angular/core';
import { MAT_DATE_FORMATS } from '@angular/material/core';
@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
  // 初始日期格式
  initialDateFormat = {
    parse: {
      dateInput: 'LL',
    },
    display: {
      dateInput: 'YYYY-MM-DD',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  };
  // 动态更新后的日期格式
  dynamicDateFormat = {
    parse: {
      dateInput: 'LL',
    },
    display: {
      dateInput: 'DD/MM/YYYY',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  };
  // 注入 MAT_DATE_FORMATS
  constructor(@Inject(MAT_DATE_FORMATS) private readonly dateFormats) {}
  // 切换日期格式
  toggleDateFormat() {
    this.dateFormats.useValue = this.dateFormats.useValue === this.initialDateFormat ? this.dynamicDateFormat : this.initialDateFormat;
  }
}