如何禁用mat-日历控件？

<mat-form-field>
  <input matInput [matDatepicker]="datepicker" disabled>
  <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
  <mat-datepicker #datepicker></mat-datepicker>
</mat-form-field>

.disabled {
  pointer-events: none;
}

<mat-form-field class="disabled">
  <input matInput [matDatepicker]="datepicker">
  <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
  <mat-datepicker #datepicker></mat-datepicker>
</mat-form-field>

import { Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  disableDatepicker() {
    const datepicker = this.el.nativeElement.querySelector('.mat-datepicker-toggle');
    this.renderer.setProperty(datepicker, 'disabled', true);
  }
}