Угловой 5 Материал Множественный мат-меню

Я была такая же проблема.

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

<!-- component1 -->
<div>
 <button mat-button [matMenuTriggerFor]="menu1" 
  (mouseenter)="openMyMenu()">Trigger1</button>
 <mat-menu #menu1="matMenu" overlapTrigger="false">
    <span (mouseleave)="closeMyMenu()">
        <button mat-menu-item>Item 1</button>
        <button mat-menu-item>Item 2</button>
    </span>
</mat-menu>
</div>

<!-- component2 -->
<div>
<button mat-button [matMenuTriggerFor]="menu2"
  (mouseenter)="openMyMenu()">Trigger2</button>
<mat-menu #menu2="matMenu" overlapTrigger="false">
    <span (mouseleave)="closeMyMenu()">
        <button mat-menu-item>Item 3</button>
        <button mat-menu-item>Item 4</button>
    </span>
 </mat-menu>
</div>

Правильное решение этой проблемы:

@ViewChildren(MatMenuTrigger) trigger: QueryList<MatMenuTrigger>;

//And call:

me.trigger.toArray()[indexOfMenu].openMenu();

У меня есть два matmenus на моей панели инструментов, каждое из которых является отдельным компонентом и запускает отдельное matmenu.

См. изображения ниже:

Вот мой компонент уведомлений (компонент 1 на изображении выше) В моем редакторе:

В моем файле notifications.component.html:

<button mat-icon-button [matMenuTriggerFor]="notificationsMenu" (mouseover)="openNotifications()">
  <mat-icon class="material-icons ele-text-color-grey">notifications</mat-icon>
</button>

<mat-menu #notificationsMenu="matMenu" [overlapTrigger]="false"></mat-menu>

Я не думаю, что возможно объединить два компонента в одном, но надеюсь, что это поможет.

Эта проблема связана со ссылками на элементы в angular, поэтому вы не можете напрямую использовать множественное меню mat в одном компоненте.

Уловка состоит в том, чтобы создать отдельный компонент, реализующий мат-меню: например,

mat-menu.component.html:

`<div>
    <span>
        <a (click)="openSelectMenu()">Menu
        <mat-icon>arrow_drop_down</mat-icon>
        <div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu1"></div>
        </a>
        <mat-menu #menu1="matMenu" overlapTrigger="false">
        <a mat-menu-item *ngFor="let menu of menuItems">{{menu}}</a></mat-menu>
    </span>
</div>`

mat-menu.component.ts

`@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;`
`menuItems=['1', '2', '3'];`

 `openSelectMenu() {
    this.trigger.openMenu();
 }`

Теперь вы можете использовать этот компонент несколько раз в любом компоненте. Например, app.component.html

`<app-menu></app-menu>
<app-menu></app-menu>`

Это будет работать.

У меня была такая же проблема, и я решил ее, используя свойство метаданных read декоратора @ViewChild.

mainmenu.component.html

<button #menuBtn1 [matMenuTriggerFor]="menu1">Trigger1</button>
<button #menuBtn2 [matMenuTriggerFor]="menu2">Trigger2</button>

mainmenu.component.ts

@ViewChild('menuBtn1', { read: MatMenuTrigger, static: false}) menu1: MatMenuTrigger;
@ViewChild('menuBtn2', { read: MatMenuTrigger, static: false}) menu2: MatMenuTrigger;

foo() {
    this.menu1.openMenu(); // also closeMenu()
    this.menu2.openMenu();
}

Хитрость заключается в том, чтобы использовать ссылку на шаблон menuBtn1 или menuBtn2 и указать через свойство read, что вы хотите получить, это директива MatMenuTrigger.

ПРИМЕЧАНИЕ. Я видел, что вопрос относится к angular и angular-material 5. Я тестировал его с angular 8, но он должен быть таким же