Диалоговое сообщение подтверждения primeNG отображается как html

Мне нужно показать диалоговое окно подтверждения в формате 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>

angular confirmation primeng
person Kicker    schedule 19.05.2017    source источник
comment
Проверьте это plnkr.co/edit/uyLs4OfiPnr3z5kImx0e?p=preview   -  person yurzui    schedule 20.05.2017
comment
Ваш плункер работает, но если я изменю сообщение, например, на 'Do you want to change user status to <p style="font-size:larger">' + status + '</p>?', оно перестанет работать. Идеи?   -  person EluciusFTW    schedule 09.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

Класс элемента сообщения 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 >?"

Затем в корневой файл styles.css добавьте следующее:

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

Вы можете сначала использовать console.log document.getElementsByClassName('ui-confirmdialog-message'), чтобы увидеть, что в нем содержится. У меня есть массив, и элемент [0] содержит мое начальное сообщение ConfirmDialog.

Возможно, есть лучший способ, но я случайно решил это, увидев ваш вопрос, и это сработало для меня. >Проверьте этот результат

person Chau Tran    schedule 21.08.2017

arrow_upward
0
arrow_downward

так что это немного старо, но на будущее решение состоит в том, чтобы изменить тип цитаты message.

Итак, измените

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

to

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