angular - 仅在媒体查询的情况下,角度材料菜单单击不起作用
问题描述
当我在执行媒体查询时尝试使用角度材质菜单组件时,我有一个奇怪的行为。
我有一个自定义媒体查询,我会根据它的响应呈现一些 html。
首先,我有一个菜单项。重新加载页面时,可以通过单击大小按钮打开菜单。之后,当我单击菜单面板时,它会按预期消失。但是,当我调整窗口大小以触发媒体查询匹配并单击大按钮或小按钮时,菜单项会打开,但当我在页面中单击它时不会关闭。
更清楚地说,我添加了一个名为普通的按钮来测试意外行为,并意识到该按钮上似乎没有这种奇怪的行为。
这很复杂,因此我为此创建了一个 stachblitz 页面。
只需按下按钮,您将看到一个菜单项将被渲染,然后单击菜单面板,它将消失。而不是调整窗口大小,以便触发媒体查询,并且大小按钮不会对关闭菜单产生任何影响。
解决方案
如果您进入该区域,似乎可以工作:
https://stackblitz.com/edit/angular-i3eb7q?file=src/app/app.component.ts
我的猜测是,因为媒体更改后的点击处理程序绑定在区域外,所以菜单在区域外初始化,用于关闭菜单的事件不会触发更改检测。
推荐阅读
- c - Posix“访问”系统调用是否考虑了 ACL?
- java - OpcUa 客户端如何获取有关服务器配置的信息?像 max-pending-publish-requests 等
- php - 谷歌安全应用
- kotlin - Kotlin 继承问题。看 [Q.] 部分
- javascript - 是否可以在 Twilio Functions 中使用 Axios?如果是这样,怎么做?
- javascript - Discord bot 重复欢迎消息
- android - 没有这样的表:TableName(代码1):,编译时:SELECT * FROM TableName
- c++ - if 语句中的原子变量会保护 if 主体吗?
- flutter - 在应用程序栏上颤动剪辑路径
- sass - 在函数名称中使用下划线时出现“SassError:无效的函数名称”