primeNG确认对话框消息显示为html

Question

我需要将确认对话框消息显示为html，这就是我在组件中查看对话框的方式：

this.confirmationService.confirm({
        header: "Change user status",
        message: "Do you want to change user status to <strong>" + status + "</strong >?",
        accept: () => {
            //
        }
    });

这就是它在页面上的样子：

我尝试过两种方式，但没有成功

<p-confirmDialog width="500" appendTo="body">
<template pTemplate="body">
    <span class="ui-confirmdialog-message">{{message}}</span>
</template>

<p-confirmDialog width="500" [innerHTML]="message"></p-confirmDialog>

Answer 1

PrimeNG ConfirmDialog的消息元素类是ui-confirmdialog-message

在ts文件中设置属性（例如：message）

        public message: string;
    ...
        this.confirmationService.confirm({
            header: "Change user status",
            message: this.message,
            accept: () => {
                //
            }
        });

       this.message = document.getElementsByClassName('ui-confirmdialog-message')[0].innerHTML = "Do you want to change user status to <span id='someOtherId'>" + status + "</span >?"

然后在你的root styles.css中添加：

.ui-confirmdialog-message span#someOtherId { color: yourColor};

你可以首先查看console.log“document.getElementsByClassName（'ui-confirmdialog-message'）”以查看其中的内容。我有一个数组，[0]元素包含我的初始ConfirmDialog消息。

可能有一种更好的方法，但我在看到你的问题之后碰巧解决了这个问题，这对我有用。Check this result

Answer 2

所以这有点旧，但对于未来 - 解决方案是更改 message 的引用类型。

所以，改变

 message: "Do you want to change user status to <strong>" + status + "</strong >?",

到

 message: `Do you want to change user status to <strong>" + status + "</strong >?`,