Angular 9
Что происходит, если вы не влияете на элемент панели меню, вы должны получить идентификатор панели, который является свойством MatMenu, с идентификатором панели, который вы получаете элемент, а затем измените значение атрибута, который вы хотите, для достижения этого вы можете использовать свойство decorator, который настраивает запрос представления ViewChild и службу Renderer2.
Здесь я покажу вам пример, в котором я динамически изменяю фон панели в соответствии с пунктом меню, который испускает указатель мыши stackblitz
import { Component, ViewChild, Renderer2 } from '@angular/core';
import { MatMenu } from '@angular/material/menu/';
@Component({
selector: 'my-app',
template: './app.component.html',
})
export class AppComponent {
@ViewChild('menu', {static: true}) menu: MatMenu
constructor(private _renderer2: Renderer2) {
}
changeBackgroundPanel(colorValue: string) {
const el = document.getElementById(this.menu.panelId);
this._renderer2.setStyle(el, 'background', colorValue);
}
}
<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
<button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
<button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
</mat-menu>
[Решение для Angular 8]
См. Пример, работающий здесь: stackblitz
Компонент:
import { Component, Renderer2 } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.scss' ]
})
export class AppComponent {
constructor(private _renderer2: Renderer2) {
}
changeBackgroundPanel(colorValue: string) {
const el = document.getElementById('myPanelId');
this._renderer2.setStyle(el, 'background', colorValue);
}
}
Html:
<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
<div id="myPanelId" class="menu-panel">
<button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
<button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
<button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
</div>
</mat-menu>
CSS:
.menu-panel {
margin: -8px 0;
padding: 8px 0;
}