javascript - Angular Material Datepicker 切换图标单击事件

Question

是否可以以某种方式捕获 Angular Material 日期选择器切换图标上的点击事件？我想要触发函数 foo()。

我的实现如下:

          <mat-form-field class="example-full-width">
            <input matInput [matDatepicker]="picker" placeholder="Date">
            <mat-datepicker-toggle matSuffix [for]="picker" (click)="foo()"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>

我已经尝试将 (click)="foo()"放入 mat-datepicker-toggle 和 mat-datepicker 元素，但事件未触发。

Answer 1

使用 Angular 日期选择器组件提供的打开和关闭事件发射器来监听日历组件的打开和关闭。

<mat-form-field class="example-full-width">
            <input  matInput [matDatepicker]="picker" placeholder="Date">
            <mat-datepicker-toggle            
             matSuffix [for]="picker" (click)="foo()"></mat-datepicker-toggle>
            <mat-datepicker 
            #ref
            (opened)="toggle(ref)"
            (closed)="toggle(ref)"
            #picker></mat-datepicker>
</mat-form-field>

Example