Угловой материал коврика меню

Question

У меня есть два компонента, которые используют мат меню.Я просто хочу добавить некоторые дополнительные стили для одного меню в одном компоненте.Я использовал этот css внутри компонента css

::ng-deep.mat-menu-panel
  {
      position: fixed !important;
      right : 2%;
  }

Теперь проблема в том, что css применяется и к меню других компонентных матов.Как я могу решить это?

Answer 1

Добавьте стиль вашей панели в глобальную таблицу стилей:

.fixed-menu-panel
{
    position: fixed !important;
    right : 2%;
}

Добавьте стиль панели в мат-меню:

<mat-menu class="fixed-menu-panel">

StackBlitz: https://stackblitz.com/edit/angular-9bheaf?file=index.html

Answer 2

Проблема в том, что меню отображается в оверлейном контейнере, прикрепленном к родительскому документу, а не самой кнопке ... Помня об этом, вам нужно подумать о том, как получить ссылку на этот mat-menu-panel и добавьте к нему класс, чтобы сделать его уникальным в открытом меню.

Например, вы можете сделать что-то вроде следующего, чтобы выполнить это.

Создайте метод компонента, который получит templateRef в качестве аргумента. Он получит mat-menu-panel с использованием Renderer2 и добавит к нему класс styled

  styleMenu(el) {
    const menuPanel = this.ren.parentNode(this.ren.parentNode(el.items.first['_elementRef'].nativeElement));

    this.ren.addClass(menuPanel, 'styled')
  }

Затем, по вашему мнению, используйте генератор событий (menuOpened), чтобы вызвать метод styleMenu при открытии меню, и передайте #styledMenu templateRef в качестве аргумента.

<button mat-button [matMenuTriggerFor]="styledMenu" (menuOpened)="styleMenu(styledMenu)">styled</button>
<mat-menu #styledMenu="matMenu">

Тогда ваш CSS будет выглядеть так

::ng-deep .mat-menu-panel.styled 
  {
      position: fixed !important;
      right : 2%;
  }

Это один из подходов, вы также можете свернуть все это в directive и затем просто применить директиву selector там, где вам это нужно.

Stackblitz

https://stackblitz.com/edit/angular-5nixtl?embed=1&file=app/menu-overview-example.ts