在 Angular Material 中单击打开垫菜单后，如何将 focus/active 留在按钮上？

How to stay focus/active on button after click to open mat-menu in Angular Material?

我在 Angular Material 中的焦点有问题。当我想打开垫子菜单时，单击后的按钮未激活或聚焦，并且具有默认颜色。关闭mat-menu后，按钮又是focused/activated。问题出在哪里？

示例来源：

https://stackblitz.com/edit/angular-focus-after-click-to-open-mat-menu?file=src%2Fapp%2Fapp.component.html

我该如何解决这个问题？ 谢谢！

你需要的是使用mat-menu的事件。您可以在菜单打开时通过应用 class 来简单地进行欺骗。

<button mat-icon-button [matMenuTriggerFor]="menuUserPhoto" class="user-photo__btn" #t="matMenuTrigger" [class.opened]="t.menuOpen">

CSS

.opened {
   background: darkcyan;
   color: white;
   opacity: 1;
}

工作堆栈块如下。

https://stackblitz.com/edit/angular-focus-after-click-to-open-mat-menu-9wbhv5?file=src%2Fapp%2Fapp.component.html