primeNG确认对话框消息显示为html [英] primeNG confirm dialog message show as html

问题描述

我需要将确认对话框消息显示为html，这就是我的对话框在组件中的外观:

I need to show confirm dialog message as html, this is how looks my dialog in component:

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

这就是页面上的样子:

我试图通过两种方法来做，但是没有成功

I tried to do this two ways but without success

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

推荐答案

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

PrimeNG ConfirmDialog's message element class is ui-confirmdialog-message

在ts文件中设置属性(例如消息)

Set up a property (e.g: message) in your ts file

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

然后在您的根styles.css中添加以下内容:

Then in your root styles.css, add this:

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

您可以先console.log"document.getElementsByClassName('ui-confirmdialog-message')"来查看其中的内容.我得到一个数组，并且[0]元素包含我的初始ConfirmDialog消息.

You can console.log "document.getElementsByClassName('ui-confirmdialog-message')" first to see what's in it. I got an array and the [0] element contains my initial ConfirmDialog message.

也许有更好的方法，但是看到您的问题后我就碰巧解决了这个问题，它对我有用. nofollow noreferrer>检查此结果

There might be a better way but I just happened to tackle this after seeing your question and it worked for me.Check this result

这篇关于primeNG确认对话框消息显示为html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！