Question

我正在尝试从初始化自定义确认对话框的正文 https://www.primefaces.org/primeng/#/confirmdialog

使用ng-template方法，但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');
        }
    });

我不知道我对ptemplate的定义是否错误顺便说一句，我尝试使用消息变量插入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');
            }
        });
    }

}

Answer 2

Rather than cd.reject() call reject(id) or accept(id) in .html

In .ts
@ViewChild('')
confirmDialogComponent: ConfirmDialog;

accept(id){
 this.id = id;
 this.confirmDialogComponent.accept()
}

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

Angular 4 prime-ng自定义confirmDialog正文

2 个答案: