如何在Material Angular中实现带确认/取消按钮的简易警告对话框？

我完全懂你的痛点！Angular Material官方示例经常嵌套一堆复杂逻辑，网上老教程又要么停留在AngularJS时代，要么版本太旧没法用。下面给你一套极简的实现方案，直接就能复刻Android AlertDialog的核心功能——标题、消息、确认/取消按钮：

第一步：确保依赖模块已导入 #

首先，你得在你的模块（比如AppModule或者功能模块）里导入必要的Angular Material模块：

import { NgModule } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common'; // 如果用到*ngIf等指令需要这个

@NgModule({
  imports: [
    CommonModule,
    MatDialogModule,
    MatButtonModule
  ],
  declarations: [/* 这里要加你的弹窗组件 */]
})
export class YourModule { }

第二步：创建简易弹窗组件 #

新建一个组件，比如叫SimpleAlertComponent，这就是你的弹窗内容载体：

组件HTML（simple-alert.component.html） #

<h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>{{ data.message }}</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button (click)="onCancel()">取消</button>
  <button mat-button color="primary" (click)="onConfirm()">确认</button>
</mat-dialog-actions>

组件TS（simple-alert.component.ts） #

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

@Component({
  selector: 'app-simple-alert',
  templateUrl: './simple-alert.component.html'
})
export class SimpleAlertComponent {
  // 通过MAT_DIALOG_DATA接收父组件传递的标题和消息
  constructor(
    public dialogRef: MatDialogRef<SimpleAlertComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { title: string; message: string }
  ) {}

  onCancel(): void {
    this.dialogRef.close(false); // 关闭弹窗，返回false表示用户取消
  }

  onConfirm(): void {
    this.dialogRef.close(true); // 关闭弹窗，返回true表示用户确认
  }
}

第三步：在父组件中调用弹窗 #

在你需要触发弹窗的组件里，注入MatDialog，然后写一个方法打开弹窗：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { SimpleAlertComponent } from './simple-alert/simple-alert.component';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.html'
})
export class ParentComponent {
  constructor(private dialog: MatDialog) {}

  openAlert(): void {
    const dialogRef = this.dialog.open(SimpleAlertComponent, {
      width: '300px', // 可选，设置弹窗宽度
      data: {
        title: '提示',
        message: '这是一个简易的警告框！'
      }
    });

    // 监听弹窗关闭后的返回值，处理用户操作
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        console.log('用户点击了确认');
        // 这里写确认后的逻辑
      } else {
        console.log('用户点击了取消');
        // 这里写取消后的逻辑
      }
    });
  }
}

然后在父组件的HTML里加个触发按钮：

<button mat-button (click)="openAlert()">打开警告框</button>

一些小提示 #

• 如果不需要自定义样式，组件的scss文件可以留空或者删掉
• 弹窗的宽度、样式都可以通过dialog.open的配置参数调整，比如加disableClose: true禁止点击外部关闭弹窗
• 新版本Angular不需要在entryComponents里声明弹窗组件，Angular会自动处理

内容的提问来源于stack exchange，提问作者Washington A. Ramos