时间戳

首页 > 解决方案 > 我们如何使用多自定义 Mat Menu？

angular - 我们如何使用多自定义 Mat Menu？

问题描述

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

菜单-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();
}

标签： angularangular-material

解决方案

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

您可以尝试做的是将菜单触发器的引用传递给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>

查看文档以获取更多信息。

推荐阅读