- 初识Material Dialog
Material Dialog是用来启动一个对话框，来询问使用者的操作意图的功能组件，并且它还可以将数据传送回调用者。Material Dialog自身符合material design 风格以及动画。
Material Dialog包含了标题区域、内容区域、actions 区域以及mat-dialog-close区域。
标题区域可以用来做一些功能提醒，内容区域用来定义功能，actions区域默认包含了取消 与提交 功能。mat-dialog-close需要绑定一个button，来触发对话框关闭时，通知消息的传递。 - 如何使用Material Dialog
使用Material Dialog，我们可以先想象出来二个组件，一个用来调用Material Dialog（下面称为调用者组件）的组件，一个是包含Material Dialog自身功能设计的组件（下面称为MD自身组件）。
使用情景：在调用者组件中需要有一个函数，来启动Material Dialog组件。当MD自身组件关闭或者提交后，能将数据回传给调用者组件。
使用：
调用者组件要想使用Material Dialog，首先要引入相关的依赖：
import { MatDialog } from '@angular/material';
引入依赖之后，需要在调用者组件的构造函数里面声明依赖：
constructor(public dialog: MatDialog) {}
前面我们说过，调用者组件需要一个打开MD自身组件的函数：
openDialog(): void {
let dialogRef = dialog.open(MD自身组件,
{height: '400px',
width:'600px',
});
}
MatDialog的open方法会返回一个MatDialogRef对象，因此，我们同样需要把这个对象的依赖导入。修改import 声明:
import { MatDialog, MatDialogRef } from '@angular/material';
同时MatDialogRef提供了打开了的对话框的处理器，它可以关闭对话框，以及在关闭对话框之后，处理从对话框中获得的通知消息。
在MD自身组件中：
//关闭对话框，并传递通知消息
dialogRef.close("通知消息");
在调用者组件中：
openDialog(): void {
let dialogRef = dialog.open(MD自身组件,
{height: '400px',
width:'600px',
data: {
key: value
}
});
// 关闭对话框之后处理消息。此方法返回一个可观察对象，通过订阅这个可观察对
// 象来处理对话框返回的通知消息。
dialogRef.afterClosed().subscribe(next);
}
data:{}可以用来从调用者组件向MD自身组件传递数据。
- 关于可观察对象，参考我的这篇文章：
对Rxjs Observable的理解与心得总结
然而事情显然没有那么简单，MD自身组件如果要发送消息，还要引入一个依赖：
MAT_DIALOG_DATA
import {Component, Inject} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
MD自身组件构造方法需要DI一下 MAT_DIALOG_DATA ,并指定MatDialogRef的泛型类型（这个组件自身）。
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {
}
DialogData数据可以是任意类型，比如字符串，类对象等等。
在对话框的actions里面，可以传递出需要返回的消息：
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No Thanks</button>
<button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>
大功告成了？没有，现在还有最后一步：
因为Dialog 是运行时才调用的，因此，我们需要让angular 编译器知道如何创建它。
angular 编译器使用ComponentFactory来创建组件，如果某个组件包含了Dialog 组件，那么这个调用者组件需要在NgMoudle的entryComponent里面注册一下：
@NgModule({
imports: [
// ...
MatDialogModule
],
declarations: [
AppComponent,
ExampleDialogComponent
],
entryComponents: [
ExampleDialogComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
不要忘了在根模块里导入MatDialogModule！
网友评论