Angular 2 – 对话框 (dialog)

在前端开发中，对话框 (dialog) 是一个常见的组件。它可以用于展示信息、收集用户输入、确认操作等等。在 Angular 2 中，我们可以使用 Angular Material 提供的组件库来实现对话框。

安装 Angular Material

首先，我们需要安装 Angular Material。在项目根目录下执行以下命令：

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

其中，@angular/animations 是 Angular 动画库，@angular/cdk 是 Angular 组件开发工具包。

然后，在项目的 app.module.ts 文件中引入所需的模块：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';

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

在 imports 数组中引入 BrowserAnimationsModule 和 MatButtonModule、MatDialogModule 模块，并在 exports 数组中导出这些模块，以便在应用中使用。

打开对话框

接下来，我们来创建一个简单的对话框。在组件中引入 MatDialog，并在需要打开对话框的地方调用 open 方法即可：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-root',
  template: `
    <button mat-raised-button (click)="openDialog()">打开对话框</button>
  `
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`对话框结果：${result}`);
    });
  }
}

@Component({
  selector: 'app-dialog',
  template: `
    <h2 mat-dialog-title>对话框标题</h2>
    <mat-dialog-content>
      对话框内容
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button (click)="onNoClick()">取消</button>
      <button mat-button [mat-dialog-close]="true">确定</button>
    </mat-dialog-actions>
  `
})
export class DialogComponent {
  constructor(public dialogRef: MatDialogRef<DialogComponent>) {}

  onNoClick(): void {
    this.dialogRef.close(false);
  }
}

在 AppComponent 中，我们引入了 MatDialog 并在 openDialog 方法中调用 this.dialog.open 方法打开对话框。open 方法接收一个组件作为参数，用于渲染对话框的内容。我们在这里传入 DialogComponent 组件。

open 方法返回一个 MatDialogRef 对象，它是对话框的引用。我们可以通过它来订阅对话框的关闭事件，并获取对话框的结果。

在 DialogComponent 中，我们定义了对话框的内容。其中，mat-dialog-title 用于设置对话框的标题，mat-dialog-content 用于设置对话框的内容，mat-dialog-actions 用于设置对话框的操作按钮。

在操作按钮中，我们使用了 mat-dialog-close 指令来关闭对话框。它接收一个值，表示对话框的结果。在这里，我们将确定按钮的值设置为 true，并在取消按钮的点击事件中调用 this.dialogRef.close(false) 来关闭对话框并返回 false。

自定义对话框

除了使用 MatDialog 提供的对话框组件外，我们还可以自定义对话框。具体来说，我们可以在对话框组件中添加任意的 HTML 内容，并在 MatDialogRef 中添加自定义方法。

下面是一个自定义对话框的示例：

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-custom-dialog',
  template: `
    <h2>自定义对话框</h2>
    <p>{{ message }}</p>
    <button mat-button (click)="onNoClick()">取消</button>
    <button mat-button color="primary" (click)="onYesClick()">确定</button>
  `
})
export class CustomDialogComponent {
  message: string;

  constructor(public dialogRef: MatDialogRef<CustomDialogComponent>) {}

  onNoClick(): void {
    this.dialogRef.close('no');
  }

  onYesClick(): void {
    this.dialogRef.close('yes');
  }
}

在这个组件中，我们添加了一个 message 属性，用于展示对话框的内容。同时，我们在 onNoClick 和 onYesClick 方法中分别调用 this.dialogRef.close 方法来关闭对话框并返回不同的结果。

在打开对话框的地方，我们需要使用 MatDialog 的 open 方法，并通过 MatDialogConfig 对象来配置对话框的属性。例如：

import { Component } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { CustomDialogComponent } from './custom-dialog.component';

@Component({
  selector: 'app-root',
  template: `
    <button mat-raised-button (click)="openDialog()">打开对话框</button>
  `
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = {
      message: '是否确认删除？'
    };

    const dialogRef = this.dialog.open(CustomDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`对话框结果：${result}`);
    });
  }
}

在这里，我们使用 MatDialogConfig 对象来配置对话框的属性。其中，disableClose 表示是否禁用关闭按钮，autoFocus 表示是否自动聚焦第一个输入框，data 表示传递给对话框的数据。

在打开对话框的地方，我们通过 this.dialog.open 方法来打开自定义对话框。同时，我们还可以订阅 MatDialogRef 的 afterClosed 事件，来获取对话框的结果。

总结

在本文中，我们介绍了如何在 Angular 2 中使用 Angular Material 提供的组件库来实现对话框。具体来说，我们使用了 MatDialog 来打开对话框，并使用了自定义对话框来展示更加灵活的内容。希望本文能够帮助你更好地理解 Angular 2 中的对话框组件。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c013c4add4f0e0ff9c6e30