Как сохранить фокус/активность на кнопке после нажатия, чтобы открыть мат-меню в Angular Material?

У меня проблема с фокусом в Angular Material. Когда я хочу открыть мат-меню, кнопка после нажатия не активируется и не фокусируется и имеет цвет по умолчанию. После закрытия мат-меню кнопка снова фокусируется/активируется. В чем проблема?

Пример источника:

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

15.12.2020 12:18

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

1 433

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Что вам нужно, так это использовать события мат-меню. Вы можете просто обмануть, применив класс, когда меню открыто.

<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

15.12.2020 13:06

Другие вопросы по теме

Угловой материал; mat-select отображать выбранный цвет

Сохранение изменений, внесенных в динамическую таблицу в Angular

Как поддерживать тот же размер столбца при уменьшении размера экрана в угловой таблице материалов

Angular Как исправить значение в массиве формы

Автозаполнение материалов Angular не работает должным образом

Невозможно отобразить значения массива в множественном выборе мата

CdkVirtualFor ничего не отображает

Как показать выбранный параметр, если значения formControlName не соответствуют значению параметра?

Компоненты Material Angular не загружаются

Значок материала не отображается при использовании [класса]

Как сохранить фокус/активность на кнопке после нажатия, чтобы открыть мат-меню в Angular Material?

Ответы 1

Другие вопросы по теме

Похожие вопросы