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

【问题标题】：primeNG confirm dialog message show as htmlprimeNG 确认对话框消息显示为 html
【发布时间】：2017-10-19 04:04:06
【问题描述】：

我需要将确认对话框消息显示为 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>

【问题讨论】：

查看plnkr.co/edit/uyLs4OfiPnr3z5kImx0e?p=preview
您的 plunker 工作，但如果我将消息更改为，例如，'Do you want to change user status to <p style="font-size:larger">' + status + '</p>?' 它不再。想法？

标签： angular primeng confirmation

【解决方案1】：

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

在你的 ts 文件中设置一个属性（例如：消息）

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 >?"

然后在你的根 style.css 中添加：

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

你可以先 console.log "document.getElementsByClassName('ui-confirmdialog-message')" 看看里面有什么。我有一个数组，[0] 元素包含我的初始 ConfirmDialog 消息。

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

【讨论】：

【解决方案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 >?`,

【讨论】：