Angular Material 7中的菜单是包含选项的控件，可以在点击触发器时打开或关闭。它支持多种类型的菜单，例如简单菜单、带有图标的菜单、级联菜单等。

以下是使用Angular Material 7创建菜单的步骤：

1. 安装和配置Angular Material 7

首先，需要安装和配置Angular Material 7。可以参考官方文档：https://material.angular.io/guide/getting-started

2. 导入所需的模块

在使用菜单之前，需要导入MatMenuModule模块和MatButtonModule模块。可以在所需的组件中导入这些模块：

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

@NgModule({ imports: [ MatMenuModule, MatButtonModule ], ... }) export class MyModule { }

3. 编写HTML模板

使用MatMenuTrigger指令创建菜单的触发器：

菜单

使用MatMenu指令定义菜单，并添加菜单项：

选项1 选项2 选项3

4. 完整示例代码

以下是一个完整的菜单示例，它包括一个带图标的菜单和一个级联菜单：

HTML模板：

菜单

选项1 选项2 选项3 keyboard_arrow_right

子选项1 子选项2

TypeScript代码：

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

@Component({ selector: 'my-component', template: ` 菜单

  选项1
  选项2
  选项3
    keyboard_arrow_right
  



  子选项1
  子选项2

` }) export class MyComponent { doSomething() { // TODO: Something } } 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。