在角材料中使用

在 Angular Material 中， 是一个强大的组件，它允许你创建各种类型的弹出菜单。

安装

在使用 之前，请确保你已经安装了 Angular Material。可以通过以下命令来安装：

npm install --save @angular/material @angular/cdk @angular/animations

也请确保在你的模块中引入了以下模块：

import {MatMenuModule} from '@angular/material/menu';
import {MatButtonModule} from '@angular/material/button';

使用

组件需要一些附加的元素和指令才能正常工作。下面是一个基本的使用示例：

<button mat-button [matMenuTriggerFor]="menu">菜单</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>项目 1</button>
  <button mat-menu-item>项目 2</button>
  <button mat-menu-item>项目 3</button>
</mat-menu>

这个例子中，我们创建了一个按钮，并为其设置了 指令，它指向了 容器。在容器中，我们创建了三个 元素，这些元素就是我们将要显示在菜单中的选项。

默认情况下，菜单被创建为下拉菜单。如果你想改变菜单的位置或是样式等属性，你可以通过指定 的附加属性来完成。

下面是一些常见的属性示例：

<mat-menu [overlapTrigger]="false" yPosition="below" xPosition="after">
  ...
</mat-menu>

在这个例子中，我们设置了 的 [overlapTrigger] 属性，使其不会遮挡按钮。同时，我们设置了 yPosition 和 xPosition，使菜单出现在按钮下方，并且按钮右侧。

增强功能

还提供了一些高级的功能，例如分组、子菜单等。下面是一些示例：

分组

你可以通过添加 元素来创建一个菜单分组：

<mat-menu>
  <h3 mat-menu-item>这是一个标题</h3>
  <mat-menu-group [disabled]="true">
    <button mat-menu-item>项目 1</button>
    <button mat-menu-item>项目 2</button>
  </mat-menu-group>
  <mat-menu-group>
    <button mat-menu-item>项目 3</button>
    <button mat-menu-item>项目 4</button>
  </mat-menu-group>
</mat-menu>

在这个例子中，我们创建了两个菜单分组，它们分别包含了两个按钮。注意，我们可以通过 [disabled] 属性来禁用一个分组的所有子项。

子菜单

你可以通过在 元素中添加 元素来创建一个子菜单：

<mat-menu>
  <button mat-menu-item>
    选项 1
    <mat-icon>arrow_right</mat-icon>
  </button>
  <mat-menu-item [matMenuTriggerFor]="submenu">
    选项 2
    <mat-icon>arrow_right</mat-icon>
  </mat-menu-item>
  <mat-menu #submenu="matMenu" yPosition="above">
    <button mat-menu-item>子项 1</button>
    <button mat-menu-item>子项 2</button>
  </mat-menu>
</mat-menu>

在这个例子中，我们在第一个选项中添加了一个 元素，用于表示这是一个含有子菜单的选项。在第二个选项中，我们添加了 [matMenuTriggerFor] 属性，并指定了一个菜单组件的变量名。这个变量名会将目标菜单组件绑定到当前的 元素中。

在我们创建了子菜单之后，我们为其设置了 yPosition="above"，使其出现在当前菜单的上方。

结论

是 Angular Material 中一个非常有用的组件，它可以让我们创建极具交互性的下拉菜单。通过本文的介绍，你可以了解到如何基本使用 组件，并学会了它的一些增强功能。