Angular 中使用模态叠加及 mat-menu

在 Angular 中，我们有许多方式来添加模态叠加窗口和弹出菜单。本文将介绍使用 Angular Material 中的 mat-dialog 和 mat-menu 组件来实现这个功能。

添加 Angular Material

首先，我们需要在 Angular 程序中添加 Angular Material。我们可以通过以下命令来安装 Angular Material：

ng add @angular/material

安装完成后，需要引入需要的模块。在 app.module.ts 中，我们需要添加以下代码：

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

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatMenuModule,
    MatDialogModule
  ],
  ...
})
export class AppModule { }

使用 mat-dialog

首先，我们来看如何使用 mat-dialog。我们需要创建一个组件作为模态叠加窗口的模板。例如，我们创建一个名为 DialogExampleComponent 的组件，代码如下：

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

@Component({
  selector: 'app-dialog-example',
  template: `
    <h2 mat-dialog-title>Dialog Title</h2>
    <mat-dialog-content>Dialog Content</mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button [mat-dialog-close]="true">Close</button>
    </mat-dialog-actions>
  `
})
export class DialogExampleComponent {}

在代码中，我们使用 Angular Material 中的 mat-dialog 组件来创建一个简单的模态叠加窗口。其中，mat-dialog-title 用于设置窗口的标题，mat-dialog-content 用于设置窗口的内容，mat-dialog-actions 整合了底部的操作按钮。

接下来，在应用的组件中打开模态叠加窗口。例如，在 AppComponent 中，我们添加以下代码：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogExampleComponent } from './dialog-example.component';

@Component({
  selector: 'app-root',
  template: `
    <button mat-raised-button (click)="openDialog()">Open Dialog</button>
  `
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogExampleComponent);
  }
}

在 AppComponent 中，我们注入 MatDialog 服务，调用 openDialog() 方法打开模态叠加窗口。 DialogExampleComponent 组件的模板将显示在模态叠加窗口中。

使用 mat-menu

接下来，我们来看如何使用 mat-menu。

首先，我们创建一个名为 MenuExampleComponent 的组件，代码如下：

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

@Component({
  selector: 'app-menu-example',
  template: `
    <button mat-button [matMenuTriggerFor]="menu">Open Menu</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
      <button mat-menu-item>Item 3</button>
    </mat-menu>
  `
})
export class MenuExampleComponent {}

在代码中，我们使用 Angular Material 中的 mat-menu 组件来创建一个简单的弹出菜单。mat-button 用于设置点击按钮，matMenuTriggerFor 用于指定菜单的触发方式，mat-menu 为我们的菜单容器，其中包含了三个 mat-menu-item，用于设置菜单项。

接下来，在应用的组件中使用 MenuExampleComponent。例如在 AppComponent 中，我们添加以下代码：

import { Component } from '@angular/core';
import { MenuExampleComponent } from './menu-example.component';

@Component({
  selector: 'app-root',
  template: `
    <app-menu-example></app-menu-example>
  `
})
export class AppComponent {}

在 AppComponent 中，我们简单的渲染 MenuExampleComponent 组件。菜单将显示我们的三个菜单项，并在单击菜单项时触发相应的操作。

结论

在 Angular 应用程序中使用 Angular Material 的 mat-dialog 和 mat-menu 组件是相当简单的。通过这些组件，我们可以很容易地创建模态叠加窗口和弹出菜单，使用户与我们的应用程序进行交互变得更加方便。