单击以在Angular Material中打开mat-menu后如何保持焦点/活动按钮？

【问题标题】：How to stay focus/active on button after click to open mat-menu in Angular Material?单击以在Angular Material中打开mat-menu后如何保持焦点/活动按钮？
【发布时间】：2021-03-26 00:37:21
【问题描述】：

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

示例来源：

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

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

【问题讨论】：

标签： angular angular-material angular2-template angular-animations

【解决方案1】：

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

<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

【讨论】：