Angular Material中的Overlay和Datepicker交互技巧

在Angular Material中，Overlay和Datepicker的交互常常会遇到一些棘手的问题，特别是当我们希望点击Datepicker不关闭Overlay时。本文将通过一个实际的例子来探讨如何解决这个问题。

问题描述

我们有一个Overlay，它通过overlayOutsideClick事件在用户点击Overlay外部时关闭。然而，当用户点击Datepicker的日期选择按钮时，Overlay也会被关闭，因为这个点击被视为外部点击。

解决方案

为了解决这个问题，我们需要一个更细致的方法来处理Overlay的关闭逻辑。以下是一个实例化的解决方案：

步骤1：使用blur事件

我们不再依赖overlayOutsideClick事件，而是使用blur事件来检测Datepicker失去焦点的情况。

TypeScript代码：