使用插值时添加换行符 [英] Adding line breaks when using interpolation

问题描述

我有一些用于警报消息框的html.使用插值，我可以重复使用相同的html来显示多个不同的警报消息.看起来像这样:<p>{{ myAlertMessage }}</p>

I have some html for an alert message box. Using interpolation, I can re-use the same html to show multiple different alert messages. It looks like this: <p>{{ myAlertMessage }}</p>

现在，我想显示更长的警报消息，其中包含换行符.但是，我似乎无法以任何会导致换行的方式修改内插的组件属性(这是一个字符串).

Now I want to show a longer alert message containing line breaks. However, I cannot seem to modify the interpolated component property (which is a string) in any way which will introduce line breaks.

例如，使用</br>，或在组件代码中的多行中将文本隔开(包含在括号或反斜杠中)或换行代码(
).显示警报消息时，这些方法都不能在文本中产生换行符.

For example, using </br>, or spacing the text across several lines in the component code (contained in either parentheses or back ticks), or the new line code (
). None of these work to produce a line break in the text when the alert message is shown.

我宁愿不必为了满足此特定用例而添加其他属性绑定.

I would prefer not to have to add further property bindings just to cater for this particular use case.

谢谢.

推荐答案

至少对于Angular v2.1.1，解决方案是使用[innerHTML]="myAlertMessage".不必使用"bypassSecurityTrustHtml"来使换行符或列表起作用.

The solution, for Angular v2.1.1 at least, is to use [innerHTML]="myAlertMessage". It isn't necessary to use "bypassSecurityTrustHtml" for line breaks or lists to work.

这篇关于使用插值时添加换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！