Angular Material UI Dialog的使用

1. 初识Material Dialog
   Material Dialog是用来启动一个对话框，来询问使用者的操作意图的功能组件，并且它还可以将数据传送回调用者。Material Dialog自身符合material design 风格以及动画。
   Material Dialog包含了标题区域、内容区域、actions 区域以及mat-dialog-close区域。
   标题区域可以用来做一些功能提醒，内容区域用来定义功能，actions区域默认包含了取消 与提交 功能。mat-dialog-close需要绑定一个button，来触发对话框关闭时，通知消息的传递。
2. 如何使用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！