Material Dialog

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { UserEditDialog } from './user.edit.dialog.c';/* 目標 dialog */
 
@Component({
    moduleId: module.id,
    selector: 'user-card',
    templateUrl: 'user.card.c.html',
    styleUrls: ['user.card.c.scss'],
})
export class UserCard {
    constructor(public dialog: MatDialog) {/* 引入MatDialog */
    }
    editUser() {
        const dialogRef = this.dialog.open(UserEditDialog, {/*開啟*/
            data:{},/* 要傳入的參數 */
            disableClose: true, /* 是否自動關閉 Esc key或點灰色區域 */
            autoFocus: false, /* 是否讓第一個元件取得 focus */
            hasBackdrop: true, /* 非顯示區域是否呈現暗灰色防止點選到背景元件 */
            position:{top:,left:,bottom:,right:}, /* 指定顯示位置 */
            id:'xxxxxx', /* 可指定 dialog id, 一般自動產生 */
            backdropClass='xxxxx' /* 指定非顯示區域樣式 */
          });
        dialogRef.afterClosed().subscribe(res => { /* 關閉時接收dialog回傳值 */
            console.log(res);
          });
        // 透過componentInstance取得 dialog 產生的實體, 來及時接收 dialog 資訊(onChange 自行定義)
        dislogRef.componentInstance.onChange.subscribe( result => {
            console.log('onDataChange:');
            console.log(result);
        }
    }
}

import { Component, Output, EventEmitter } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
@Component({
    selector: 'user-edit-dialog',
    templateUrl: './user.edit.dialog.c.html',
    styleUrls: ['./user.edit.dialog.c.scss']
})
 
export class UserEditDialog {
    @Output() onChange: EventEmitter = new EventEmitter();/* 自訂事件 */
    constructor(
        private dialog: MatDialog,
        private dialogRef: MatDialogRef<UserEditDialog>, /* 自我參照 */
        @Inject(MAT_DIALOG_DATA) public user:IUser /* 呼叫層傳入的參數 */
        ) { }
    onClose() {
        this.dialogRef.close(this.user);/* 關閉且回傳值給父層 */
        //this.dialog.closeAll();/* 關閉所有 dialog */
    }
    onMove() { /* 指定位置 */
        this.dialogRef.updatePosition({top:0});
    }
    dataChange() {
        this.onDataChange.emit({result:'OK'}); /* 傳送事件 */
    }
}

@NgModule({
     declarations: [UserEditDialog],
    entryComponents: [UserEditDialog],
})

this.dialog.afterAllClosed.subscribe(() => {<br />
      console.log('dialog全數關閉');<br />
});<br />
<br />
this.dialog.afterOpen.subscribe((ref: MatDialogRef<any>) => {<br />
      console.log(`新開的dialog id=${ref.id}`);<br />
      console.log(`已開啟 ${this.dialog.openDialogs.length} 個dialog`);<br />
});