Angular: как визуализировать разрывы строк в фигурных скобках?

Question

Возможно, это невозможно, но мне интересно, могу ли я встроить разрыв строки в строку, которую я передаю в MatDialogComponent, отображаемую в форме через {{ }}

Я разработал простой WarningDialogComponent, который имеет параметры для заголовок, сообщение, ОК и текст кнопки отмены.

Текст сообщения отображается внутри шаблона

<mat-dialog-content>
    {{message}}
</mat-dialog-content>

Это работает нормально, за исключением случаев, когда я хочу, чтобы в сообщении были определенные разрывы строк, что-то например:

Вы собираетесь удалить учетную запись «Электрики»

Это невозможно отменить!

Я пробовал использовать кавычки backti c или \n\n встроено в message, и я знаю, что html обычно экранируется. Конечно, я мог бы перепроектировать свою форму или поручить ей визуализировать встроенный html, но надеялся, что есть простой способ каким-то образом поместить разрыв строки в строку, содержащуюся в переменной message, которая будет работать без необходимости возиться с самим компонентом.

Answer 1

Вы могли бы сделать что-нибудь css. Элемент mat-dialog-content автоматически получает класс mat-dialog-content . Просто добавьте этот стиль в этот класс в вашу глобальную таблицу стилей

.mat-dialog-content{white-space:pre;}

Теперь ваш \ n будет рассматриваться как новая строка в вашем обычном тексте. Пожалуйста, обратитесь к этому простому stackblitz .

Спасибо.

Answer 2

похоже, что вы хотите встроить html в вашу переменную и angular отобразить этот html без очистки. чтобы ваш {{message}} мог иметь разрывы строк <br/> и отображать их в сообщении.

по умолчанию Angular очищает содержимое переменных для предотвращения межсайтового скриптинга.

однако, если отображаемое значение wi sh является «доверенным» (т. е. это не то, которое пользователь может ввести), angular позволяет использовать Dom sanitizer для пометки содержимого как безопасно.

с его помощью вы можете иметь свой message, содержащий HTML, и он будет отображаться так, как вы ожидаете. однако для всего, что вы хотите обойти дезинфицирующее средство Angular, убедитесь, что вы контролируете, откуда приходит это сообщение