Question

我的应用程序需要使用“多重自定义”菜单。我可以将此@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;代码用于单个菜单菜单。请建议我如何才能实现多菜单功能，并请找到示例代码供您参考。

menu-example.html

<button mat-button [matMenuTriggerFor]="menu" (mouseenter)="someMethod()">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item >User</button>
  <button mat-menu-item >Cards</button>
  <button mat-menu-item >About</button>
</mat-menu>

菜单示例.ts

import {Component, ViewChild} from '@angular/core';

import { MatMenuTrigger } from '@angular/material';

@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})
export class MenuOverviewExample {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  someMethod() {
    this.trigger.openMenu();
  }

}

我的问题是：如何为@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;和this.trigger.openMenu();使用多时间

下面的代码可以工作吗？

@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
@ViewChild(MatMenuTrigger) trigger01: MatMenuTrigger;
someMethod() {
    this.trigger.openMenu();
}
anotherMethod() {
    this.trigger01.openMenu();
}

Answer 1

编辑：经过一段时间的思考，您似乎正在寻找一种方法来使嵌套菜单自动悬停在嵌套菜单上。

您可以尝试将菜单触发器的引用传递到showNestedMenu方法中（如下代码所示）：

<button mat-button [matMenuTriggerFor]="menu" (mouseenter)="showMenu()">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="userMenu" (mouseenter)="showNestedMenu(nestedMenuTrigger)" #nestedMenuTrigger="matMenuTrigger">User</button>
  <mat-menu #userMenu="matMenu">
    <button mat-menu-item>John Tan</button>
    <button mat-menu-item>Logout</button>
  </mat-menu>
  <button mat-menu-item>Cards</button>
  <button mat-menu-item>About</button>
</mat-menu>

import { MatMenuTrigger } from '@angular/material';

// ...
export class MyComponent {
  showNestedMenu(menu: MatMenuTrigger) {
    menu.openMenu();
  }
}

原始答案

如果您要的是多菜单/嵌套菜单，可以通过使另一个菜单与菜单项绑定到菜单触发器来完成：

<button mat-button [matMenuTriggerFor]="menu" (mouseenter)="someMethod()">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="userMenu">User</button>
  <mat-menu #userMenu="matMenu">
    <button mat-menu-item>John Tan</button>
    <button mat-menu-item>Logout</button>
  </mat-menu>
  <button mat-menu-item>Cards</button>
  <button mat-menu-item>About</button>
</mat-menu>

查看docs以获得更多信息。

我们如何使用多自定义Mat菜单？

1 个答案: