Angular Material Datepicker 切换图标单击事件

Question

是否有可能以某种方式捕获角度材料日期选择器切换图标上的点击事件？我想要触发函数 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

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

<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>

例子