注：下面我介紹的是 p-confirmDialog（對話方塊） 在完整的專案中的用法,，以及在巢狀使用的時候的用法，關於在單個頁面中的用法可以參考官網。官網地址：https://www.primefaces.org/primeng/#/

1、引入ConfirmDialogModule模組

在專案中全域性引入ConfirmDialogModule模組，需要在app.modules.ts檔案引入

import {
  ConfirmDialogModule,
  ConfirmationService
} from 'primeng/primeng';

Import: [

Providers: [ ConfirmationService ]

2、插入標籤

在專案中，一般是將標籤放在檔案main.component.html檔案中，以便於用於全域性。也就是說，你只需要在main.component.html中定義一次就可以在整個專案中使用了。

語法：

<p-confirmDialog [appendTo]="'body'" [acceptLabel]="'確定'" [rejectLabel]="'取消'"></p-confirmDialog>

3、單次使用（不巢狀使用）

（1）在當前頁引入

import {ConfirmationService} from 'primeng/primeng';

（2）依賴注入

constructor(private confirmationService: ConfirmationService) {}

（3）函式

在你需要彈出框的位置寫函式：

this.confirmationService.confirm({
  message: '彈出框的詳細內容',
  header: '彈出框的標題',
  icon: 'fa fa-info-circle'

});

在該函式中的header、message等性質你可以參考官網，根據你的需要來新增。在此我就不贅述了。

官網地址：https://www.primefaces.org/primeng/#/confirmdialog

4、巢狀使用

巢狀使用相對而言就複雜很多了。

前兩個步驟跟上述的單次使用一樣，在此不再贅述。

oncomfirme(){

this.confirmationService.confirm({
  message: '彈出框的詳細內容',
  header: '彈出框的標題',
  icon: 'fa fa-info-circle',
  acceptLabel: '是',
  rejectLabel: '否',
  accept: () => {
    this.onNewLocationInfo();
  }
});

}

onNewLocationInfo(msg){

this.confirmationService.confirm({
  message: '彈出框的詳細內容',
  header: '彈出框的標題',
  icon: 'fa fa-info-circle',
  acceptLabel: '是',
  rejectLabel: '否'
 });

}

到此為止一個彈出框的巢狀完成了。你會發現在關閉第一個彈出框後，第二個彈出框不會出現，而且還不會抱任何的錯。這是什麼原因呢？

開始的時候我就說過，在專案中，一般是將標籤放在檔案main.component.html檔案中，以便於用於全域性。也就是使所有的彈出框用的都是同一個彈出框標籤。

當我們單擊第一個彈出框的“是”按鈕的時候，會呼叫函式 onNewLocationInfo();彈出第二個彈出框，並關閉第一個彈出框。因此，我們只能看到第一個彈出框關閉，而看不到第二個框開啟，因為第二個彈出框在被開啟的同時就被關閉了。該如何解決這個問題呢？

很簡單，在你需要使用巢狀彈出框的元件的HTML檔案中新增標籤p-confirmDialog,並給一個key值。

<p-confirmDialog [appendTo]="'body'" [key]="'newLocationConfirm'"></p-confirmDialog>

<p-confirmDialog [appendTo]="'body'" [key]="'mapConfirm'"></p-confirmDialog>

然後，在你的函式中將key值新增進去。

oncomfirme(){

this.confirmationService.confirm({
  message: '彈出框的詳細內容',
  header: '彈出框的標題',
  icon: 'fa fa-info-circle',

key: 'newLocationConfirm',
  acceptLabel: '是',
  rejectLabel: '否',
  accept: () => {
    this.onNewLocationInfo();
  }
});

}

onNewLocationInfo(msg){

this.confirmationService.confirm({
  message: '彈出框的詳細內容',
  header: '彈出框的標題',
  icon: 'fa fa-info-circle',

key: 'mapConfirm',
  acceptLabel: '是',
  rejectLabel: '否'
 });

}

這樣問題就得到了解決。標籤中的key值就相當於關鍵字的存在，通過這個key來指定用哪個標籤，而不是用那個全域性的標籤。