角4黃金納克定制confirmDialog體

Question

我試圖用NG-模板方法從黃金納克 https://www.primefaces.org/primeng/#/confirmdialog

定製確認對話框的身體，但在html沒有出現 這裏是我的代碼：

<p-confirmDialog header="Enter PIN" icon="fa fa-question-circle" width="425" #cd> 
    <ng-template pTemplate="body"> 
    <ul> 
     <li>test</li> 
    </ul> 
    </ng-template> 
    <p-footer> 

     <button type="button" pButton icon="fa-close" label="No" (click)="cd.reject()"></button> 
     <button type="button" pButton icon="fa-check" label="Yes" (click)="cd.accept()"></button> 
    </p-footer> 
</p-confirmDialog> 

我的服務呼叫

this.confirmationService.confirm({ 
     message: null, 
     header: null, 
     icon: null, 
     accept:() => { 
      this.checkCurrentCompliance('fp'); 
     } 
    }); 

我不知道我的定義到p模板是錯誤的 順便說一句，我試圖插入HTML使用消息變量，但它不會讓我添加內聯樣式。

Answer 1

試試這個：

<p-confirmDialog header="Enter PIN" icon="fa fa-question-circle" width="425" #cd> 
    <p-footer> 
     <button type="button" pButton icon="fa-close" label="No" (click)="cd.reject()"></button> 
     <button type="button" pButton icon="fa-check" label="Yes" (click)="cd.accept()"></button> 
    </p-footer> 
</p-confirmDialog> 

component.ts

export class HomeComponent implements OnInit { 

    message: any; 

    constructor(private confirmationService: ConfirmationService) { } 

    ngOnInit() { 
     this.message = document.getElementsByClassName('ui-confirmdialog-message')[0].innerHTML = "<ul><li>test</li></ul>"; 
    } 

    confirm() { 
     this.confirmationService.confirm({ 
      message: this.message, 
      header: null, 
      icon: null, 
      accept:() => { 
       this.checkCurrentCompliance('fp'); 
      } 
     }); 
    } 

}