如何单击打开 mat-menu 并关闭其他打开的菜单（如果有）？

Question

我被困在这个问题上，当有一个标题多个菜单时，当我第一次打开菜单时没有问题，但如果已经打开了一个菜单，我点击打开第二个菜单它不起作用。它将首先关闭之前打开的菜单，然后我们必须再次单击以打开新菜单。

我想要的是，当我点击一个菜单时，它应该通过单击打开，如果有任何菜单打开，它也会关闭。我在 angular2 材料文档中没有找到任何关于此的内容。

以下是该问题示例的链接：

https://stackblitz.com/edit/angular-8ntb2i

Answer 1

没有简单的方法可以解决这个问题，因为当菜单打开时，全屏覆盖也会应用。覆盖层旨在检测点击，然后关闭菜单并删除覆盖层。正如您已经猜到的，此覆盖层会阻止点击另一个菜单触发器，并且当另一个菜单已打开时我们无法打开该菜单。

作为解决方法，您可以执行以下操作：

捕获覆盖层、获取x和y轴上的点击事件，在覆盖层被删除后，您可以检查用户是否想要单击另一个菜单（您可以使用本文中的方法），如果是，则模拟另一次单击同一轴。