今天來講如何寫一個共用的Dialog

並包成一個service來呼叫

因為Angular Material-dialog

需要建一個component並藉dialog.open()來動態載入

所以首先我們先建一個ShareDialogComponent component

ng g c share-dialog --spec false

接著在app.module中

   // 告知此ShareDialogComponent在appMoudle
   declarations: [ShareDialogComponent] 
   //告知appMoudle需要動態載入ShareDialogComponent
   entryComponents: [ShareDialogComponent],

另外，關於entryComponents，詳如此篇
https://ithelp.ithome.com.tw/articles/10206447

先來設計一下此dialog的畫面

share-dialog.component.html

<div>
  <h2 mat-dialof-title>溫馨小提醒</h2>
  <mat-dialog-content>
    {{data.content}}
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-raised-button (click)="onClose()" color="warn">OK</button>
  </mat-dialog-actions>
</div>

share-dialog.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-share-dialog',
  templateUrl: './share-dialog.component.html',
  styleUrls: ['./share-dialog.component.scss']
})
export class ShareDialogComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<ShareDialogComponent>, // 呼叫dialog方法
    @Inject(MAT_DIALOG_DATA) public data: any, 
    // 接收從主頁面來的資料，目前給share-dialog.component.html使用`` {{data.content}}``
  ) { }

  ngOnInit() {
  }
  onClose() {
    this.dialogRef.close(); //關閉dialog function
  }
}

之後在需要使用的程式中，撰寫一段呼叫dialog的方法

tri001.component.ts

 public openDialog(pContent?: any): void { //參數pConent可給可不給
    const dialogRef = this.dialog.open(ShareDialogComponent, {
      width: '600px',//Dialog寬度
      data: { content: pContent }//將傳遞之資料內容給與ShareDialogComponent
    });
    dialogRef.afterClosed().subscribe(result => { //Dialog關閉後所觸發的事件撰寫處
      console.log('The dialog was closed');
      console.log(pContent);
    });
  }

tri001.component.html

<button mat-fab color="warn" (click)="openDialog('下班了')">Test</button>

但這樣會每次要使用dialog時，就需要在各個component中import ShareDialogComponent，並且寫一大包呼叫dialog的code，這樣其實蠻重工的

所以我們要將此共用的dialog包成一個service，把它變得跟console.log()一樣好用

包成一個Share Dialog Service

先在Share Dialog生出一個ShareDialogService

ng g s share-dialog --spec false

之後在service裡面去呼叫ShareDialogComponent

把tri001.component.ts中的openDialog()移植到
share-dialog.service.ts中的openShareDialog()

share-dialog.service.ts

import { Injectable, Inject } from '@angular/core';
import { ShareDialogComponent } from './share-dialog.component';
import { MatDialog } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class ShareDialogService {

  constructor(public dialog: MatDialog) { }
  public openShareDialog(pContent?: any): void {
    const dialogRef = this.dialog.open(ShareDialogComponent, { 
      width: '600px', 
      data: { content: pContent } 
    });
    dialogRef.afterClosed().subscribe(result => { 
      console.log('The dialog was closed');
      console.log(pContent);
    });
  }
}

接著

tri001.component.ts

 constructor(
    private programService: ProgramsService,
    private shareDialogService: ShareDialogService) { }

public openDialog() {
    this.shareDialogService.openShareDialog("天氣冷了，多穿點衣服吧");
  }

tri001.component.html

<button mat-fab color="warn" (click)="openDialog()">Test</button>

終於大功告成啦~~~

以後只要在程式中呼叫this.shareDialogService.openShareDialog()即會有提醒視窗蹦出來

個人心得

• Dialog在component間傳遞資料很好用

    this.shareDialogService.openShareDialog(JSON.stringify(this.uBike[2]));

一下就把撈回來的ubike場站原始資料顯示出來囉

• 此dialog刻意保留(pContent?: any)這個可給可不給的參數，讓你在component中可以在.html或是.ts中都可以撰寫code，彈性更大了