Angular中如何通过MatDialog将表格行数据传递至弹窗组件并展示

这事儿很简单，Angular Material的MatDialog专门留了数据传递的口子，咱们分三步搞定：

1. 父组件传递行数据到弹窗 #

修改你组件TS里的toggle方法，把点击的行数据塞进dialogConfig.data属性里——这是MatDialog用来传递参数的标准方式：

toggle(userRow: any){
  const dialogConfig = new MatDialogConfig();
  dialogConfig.disableClose = false;
  dialogConfig.autoFocus = true;
  dialogConfig.width="60%";
  // 关键：把当前行的user数据传入弹窗
  dialogConfig.data = userRow;
  this.dialog.open(UserDetailsPopupComponent, dialogConfig);
}

2. 弹窗组件接收传递的数据 #

打开UserDetailsPopupComponent的TS文件，通过MAT_DIALOG_DATA依赖注入获取父组件传来的数据。别忘了先导入需要的模块：

import { Component, Inject } from '@angular/core';
// 必须导入这个常量来获取弹窗数据
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-user-details-popup',
  templateUrl: './user-details-popup.component.html',
  styleUrls: ['./user-details-popup.component.css']
})
export class UserDetailsPopupComponent {
  // 注入后，data就是父组件传过来的userRow对象
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

3. 弹窗HTML展示数据 #

最后修改弹窗的HTML模板，把原来的u.name改成我们注入的data.name就行了：

<h1>Hello {{data.name}}</h1>

如果以后你的user对象添加了更多字段（比如ID、邮箱），直接用data.id、data.email就能展示，完全适配。

内容的提问来源于stack exchange，提问作者Anonymous