Material Dialog 教學 - slioplark/angular-tutorial GitHub Wiki

新增 Dialog 與 OpenDialog Component

ng g c Dialog
ng g c OpenDialog
  • DialogComponent：用來開啟 dialog 的 component
  • OpenDialogComponent：當 dialog 被開啟時，便會載入的 component

寫入 entryComponents

因為 OpenDialogComponent 是「動態載入」的 component，所以需寫入 entryComponents 陣列。

@NgModule({
  entryComponents: [
    OpenDialogComponent
  ]
})
export class MaterialModule { }

DialogComponent 傳送 data 並開啟 dialog

1. 依賴注入 MatDialog

constructor(private dialog: MatDialog) { }

2. 使用 open 方法

主要有兩個參數：

  • 載入 dialog 的 component，如 OpenDialogComponent
  • 設定 dialog 的 config 物件，含高度、寬度，或傳入 data 以顯示資料
openDialog() {
  const dialogRef = this.dialog.open(OpenDialogComponent, {
    width: '500px',
    data: { title: 'Install Angular' }
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}

3. 新增 click 事件的 button

透過 openDialog() 方法以開啟 dialog。

<button (click)="openDialog()">Open Dialog</button>

OpenDialogComponent 接受 data 並顯示資料

1. 依賴注入 MAT_DIALOG_DATA

data 是來自於 DialogComponent 設定的 vaule。

constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }

2. 使用 interpolation 在 html 顯示資料

{{ data.title }}

設計顯示 dialog 的結構

<h2 mat-dialog-title>
<!-- 標題 -->
</h2>

<mat-dialog-content class="mat-typography">
<!-- 內容 -->
</mat-dialog-content>

<mat-dialog-actions align="end">
<!-- 按鈕 -->
</mat-dialog-actions>

傳回關閉 dialog 後的結果

1. 使用 mat-dialog-close 方法

透過 property binding 以 true 的結果傳回開啟 dialog 的組件(OpenDialogComponent)，如下：

<mat-dialog-actions align="end">
    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
</mat-dialog-actions>

mat-dialog-close 是一個只能放在 button 標籤裡面的 directive。 不但能協助 button 關閉 dialog，也能把「結果」傳回開啟 dialog 的組件。

2. 使用 MatDialogRef 方法

依賴注入 MatDialogRef，並在「泛型」加入對應的 dialog 組件。

constructor(private dialogRef: MatDialogRef<OpenDialogComponent>) { }

使用 dialogRef 的 close() 方法，把需傳回的結果作為「參數」傳入，並關閉 dialog。

cancel() {
  this.dialogRef.close(false);
}

利用 click 事件觸發 cancel() 方法。

<mat-dialog-actions align="end">
    <button mat-button (click)="cancel()">Cancel</button>
</mat-dialog-actions>
⚠️ **GitHub.com Fallback** ⚠️