angular 使用dialog的经验

Angular 中使用 dialog 可以通过 Angular Material 提供的 MatDialog 实现。

首先，需要在应用中引入 Angular Material 模块。在 app.module.ts 中导入以下模块：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';

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

然后，在组件中使用 MatDialog 打开一个对话框：

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-example-dialog',
  template: `
    <h2 mat-dialog-title>{{ data.title }}</h2>
    <mat-dialog-content>
      <p>{{ data.content }}</p>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button mat-dialog-close>取消</button>
      <button mat-button [mat-dialog-close]="true" cdkFocusInitial>确定</button>
    </mat-dialog-actions>
  `
})
export class ExampleDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ExampleDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}
}

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

  openDialog() {
    const dialogRef = this.dialog.open(ExampleDialogComponent, {
      width: '300px',
      data: { title: '提示', content: '确认删除？' }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        console.log('删除');
      }
    });
  }
}

在 ExampleDialogComponent 中定义对话框的内容，并通过 MatDialogRef 关闭对话框。在 ExampleComponent 中通过 dialog.open() 打开对话框，并监听对话框关闭事件。