Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

angular - How to open mat-menu on a single click and close other opened menu if there is any?

I am stuck on this issue that when there a header multiple menu's and when i open a menu first time there is no issue but if there is already a menu opened and i click to open a second menu it doesn't work. it will first close the previously opened menu and then we have to click again to open the new menu.

What i want is that when i click on a menu it should open in a single click and if there is any menu opened, it closes too. I haven't found any thing regarding this in angular2 material documentation.

Below is the link for the sample of that issue:

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

There is no easy way to solve this issue, because when menu opens, the fullscreen overlay apllies too. The overlay is intended to detect click, then close menu and remove the overlay. As you already guessed, this overlay prevent clicks on another menu trigger and we can't open the menu, when another one is already opened.

As a workaround you can do something like this:

Catch click event on the overlay, get x and y axis, and after the overlay will be removed, you can check, does user want to click on another menu (you can use method from this post), and if so, simulate another one click at the same axis.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...