Angular Material 7 – 菜单

Angular Material是一个面向Angular开发者的UI组件库，它通过提供基本的UI组件来简化应用程序的UI设计。在Angular Material中，有一种菜单组件，它可以让你创建多种风格的下拉菜单。本文将介绍如何在Angular应用程序中使用Angular Material 7菜单。

安装Angular Material 7

首先，你需要安装Angular Material 7。你可以通过npm执行以下命令来安装它：

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

该命令将安装Angular Material、CDK和动画库。在安装完成之后，你需要将Angular Material导入到你的应用程序中。为此，你需要在app.module.ts中添加以下代码：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatMenuModule} from '@angular/material/menu';

@NgModule({
  imports: [BrowserAnimationsModule, MatMenuModule],
  exports: [MatMenuModule]
})
export class MaterialModule { }

这里，我们通过MatMenuModule将菜单模块导入到我们的应用程序中，并通过MaterialModule将其导出。

创建一个简单的菜单

现在，我们已经将Angular Material 7安装到我们的应用程序中了。接下来，我们将创建一个简单的菜单来展示如何使用菜单。

下面是创建简单菜单的HTML和TypeScript代码：

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

在这些代码中，我们创建了一个包含两个按钮的菜单。第一个按钮用于打开下拉菜单，第二个按钮是菜单中的两个项目。

运行这个应用程序，你应该会看到一个按钮，点击它会弹出一个包含两个项目的下拉菜单。

创建菜单嵌套结构

菜单组件可以含有任意数量的嵌套层级。为了创建多级菜单，你可以使用嵌套的元素。

下面是创建菜单嵌套结构的HTML和TypeScript代码：

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

在这些代码中，我们创建了一个包含两个项目的菜单，并通过嵌套的元素，将第二个项目的下拉菜单创建成了一个包含两个子项目的菜单。

运行这个应用程序，你应该会看到一个带有两个下拉菜单项目的主菜单和一个带有两个子项目的子菜单。

菜单的位置

菜单组件提供一个属性来设置菜单在屏幕上的位置。可以使用以下属性在菜单的任意位置显示：

matMenuTriggerXPosition：指定菜单的水平位置。这个属性接受两个值：’before’（靠近触发按钮的左侧）和’after’（靠近触发按钮的右侧）。
matMenuTriggerYPosition：指定菜单的垂直位置。这个属性接受两个值：’above’（上方）和’below’（下方）。

下面是设置菜单位置的HTML和TypeScript代码：

<button mat-icon-button [matMenuTriggerFor]="menu" [matMenuTriggerXPosition]="'after'" [matMenuTriggerYPosition]="'above'">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>项目 1</button>
  <button mat-menu-item>项目 2</button>
</mat-menu>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

在这些代码中，我们创建了一个使用图标按钮作为触发按钮的菜单，并设置了菜单的水平位置为在触发按钮的右侧，垂直位置为在触发按钮的上方。

运行这个应用程序，你应该会看到一个图标按钮，在其上方弹出一个菜单，菜单的左侧对齐于该按钮，菜单的上方对齐于该按钮的下方。

菜单的触发事件

菜单组件提供了几种与菜单相关的事件，你可以使用这些事件监听菜单的打开和关闭事件，并在这些事件发生时执行任意代码。

下面是定义菜单触发事件的HTML和TypeScript代码：

<button mat-button [matMenuTriggerFor]="menu" (menuOpened)="onMenuOpen()" (menuClosed)="onMenuClose()">菜单</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>项目 1</button>
  <button mat-menu-item>项目 2</button>
</mat-menu>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onMenuOpen() {
    console.log('菜单打开');
  }

  onMenuClose() {
    console.log('菜单关闭');
  }
}

在这些代码中，我们创建了一个具有打开和关闭事件处理程序的菜单，并分别在这些事件发生时输出console.log。

运行这个应用程序，你应该会看到一个带有两个项目的菜单，每当你打开或关闭菜单时，控制台都会输出相应的消息。

自定义菜单项

菜单组件提供一些内置的美化样式，但是你也可以自定义菜单样式。你可以使用以下CSS类来自定义菜单项的样式：

.mat-menu-item：表示菜单项。
.mat-menu-header：表示菜单头部。
.mat-menu-divider：表示菜单分隔线。
.mat-menu-panel：表示整个菜单面板。
.mat-menu-content：表示菜单内容。

下面是自定义菜单项的CSS和HTML代码：

.mat-menu-item {
  background-color: #f9f9f9;
  color: #444;
}

.mat-menu-item:hover {
  background-color: #007bff;
  color: #fff;
}

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

在这些代码中，我们为菜单项定义了背景颜色和悬停颜色。

运行这个应用程序，你应该会看到一个背景色为#f9f9f9的菜单，当你将鼠标悬停在菜单项上时，其背景色变为#007bff。