Angular Material对话框mat-dialog中如何接收和传递数据

Angular Material对话框mat-dialog中如何接收和传递数据

一、对话框的几个部分

mat-dialog-title:对话框标题
mat-dialog-content:对话框内容部分
mat-dialog-action:对话框底部的操作按钮，如取消/提交等

二、父组件

（以下统一将调用到对话框的组件称为父组件，而对话框组件就是子组件）

这里的父子组件跟其他父子组件不太一样，不是直接通过引入对话框组件的方式，而是使用ref方式来调用的，之前尝试过@Input()装饰器来传值但是失败了。。。

之所以叫父子组件是觉得他们本质上还是父子组件之间的传值，以后遇到类似这样通过ref来调用子组件的，应该多少可以参考并尝试一下这种思路

以下来正式说明其用法

1.在父组件的a.component.html文件中调用openxxxx()方法（随意起名）触发对话框的弹出事件

2.在父组件的a.component.ts文件中引入dialog

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

然后在刚才设置的方法中调起弹出框的open事件，并可在其中传入值data,
当关闭弹出框后，会触发afterClosed()并将从子组件（对话框组件）中携带过来的值以result表示

更具体一点的例子：

//打开新建项目的对话框
openNewProjectDialog(){
	const dialogRef = this.dialog.open(
		width:'700px',
		data:{
			  item:[...this.item],
			  age:this.age,
			  obj:{
					a:1,
					b:'123',
			}
			//总之你想传多少数据都可以哈哈
			//甚至是方法也可以传
			fn1:this.fn,
			//在父组件中有fn方法
		}
	)
}

注意：如果父组件中的fn方法中还调用了其他方法，这时只传fn过去是不行的，目前还没想到很好的解决办法，只有以后补充了，也请大佬们多多指教
目前我的做法是直接传this，但是传过去的只有属性，没有方法，方法还是在dialog组件中实现

三、子组件（对话框组件）
3.对话框组件接收数据、回传数据
子组件的dialog.component.html文件中直接写html结构代码即可

在子组件的dialog.component.ts文件中

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

例如要在dialog子组件中调用父组件的fn方法
使用

this.data.fn1();//即可

或使用父组件中的属性

this.data.obj.b

主要参考的文章
https://www.cnblogs.com/crackedlove/p/11603275.html