仅在媒体查询的情况下，角度材料菜单单击不起作用

Question

我在执行媒体查询时尝试使用角度材质菜单组件时出现异常行为。

我有一个自定义媒体查询，我会根据它的响应呈现一些 html。

首先，我有一个菜单项。页面重新加载时，可以通过单击大小按钮打开菜单。之后，当我单击菜单面板时，它会按预期消失。但是，当我调整窗口大小以触发媒体查询匹配并单击大按钮或小按钮时，菜单项会打开，但当我在页面中单击它时不会关闭。

为了更清楚，我添加了一个名为普通的按钮来测试意外行为，并意识到该按钮上似乎没有这种奇怪的行为。

这很复杂，因此我为此创建了一个 stachblitz 页面。

只需按下按钮，您将看到一个菜单项将被渲染，然后单击菜单面板，它将消失。而不是调整窗口大小，以便触发媒体查询，并且大小按钮不会对关闭菜单产生任何影响。

https://stackblitz.com/edit/angular-qswyoq

Answer 1

如果您进入该区域，似乎可以工作：

https://stackblitz.com/edit/angular-i3eb7q?file=src/app/app.component.ts

我的猜测是因为媒体更改后的点击处理程序绑定在区域外，菜单在区域外初始化，用于关闭菜单的事件不会触发更改检测。