Angular Material：检查用户是否在没有进行任何选择的情况下单击了 Datepicker 外部答案

【问题标题】：Angular Material: Check if User clicked outside Datepicker without Making Any SelectionAngular Material：检查用户是否在没有进行任何选择的情况下单击了 Datepicker 外部
【发布时间】：2020-06-05 05:48:10
【问题描述】：

如果用户在 Material Angular 日期选择器外部单击，输出事件是什么？

想知道用户点击日期选择器的具体时间，
然后没有进行任何新的选择，或者没有重新选择已经输入的日期
并点击退出？（因此关闭它）。

Closed Stream 事件不是确切的答案，因为用户可能点击了日期选择。

https://material.angular.io/components/datepicker/api

【问题讨论】：

您可以使用HostListener 来监听click 事件并检查您的元素是否属于ClickEvent.target。
嗨@MikeS。是的，我读到过，但是听说 HostListener 可能是主要的速度问题，公司有点反对使用它，谢谢
这是监听事件的角度方式，绝对不是主要的速度问题，因为只要组件处于活动状态，它只会监听事件。但无论如何 - 另一种方法是将事件回调添加到您的 datepicker 组件的本机 onBlur 和 onFocus 事件。
嗨@MikeS。您可以为 onblur onfocus 写答案作为解决方案，您可以提供简单的代码吗？我可以送积分，谢谢！

标签： angular datepicker angular-material angular8

【解决方案1】：

你可以存储在一个变量中

waitClose:boolean

然后，您可以使用事件 (dateChange) 将变量设置为 false 和 (opened) 将变量设置为 true。

(close)="waitClose && close()" 使函数 close() 仅在您单击外部时发生

<mat-form-field>
  <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker" 
                            (dateChange)="waitClose=false" >
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker (closed)="waitClose && close()"
                            (opened)="waitClose=true">
  </mat-datepicker>
</mat-form-field>

见stackblitz

【讨论】：

嗨@Elisio，在这里发布了另一个问题，也许你知道，谢谢stackoverflow.com/questions/62209606/…