使用插值时添加换行符答案

【问题标题】：Adding line breaks when using interpolation使用插值时添加换行符
【发布时间】：2017-04-06 09:08:52
【问题描述】：

我有一些用于警告消息框的 html。使用插值，我可以重复使用相同的 html 来显示多个不同的警报消息。它看起来像这样：{{ myAlertMessage }}

现在我想显示一条包含换行符的更长警报消息。但是，我似乎无法以任何会引入换行符的方式修改内插组件属性（它是一个字符串）。

例如，使用，或在组件代码（包含在括号或反引号中）或新的行代码（&#13;）中将文本隔开几行。当显示警报消息时，这些都不会在文本中产生换行符。

我不希望仅仅为了满足这个特定的用例而添加更多的属性绑定。

提前致谢。

【问题讨论】：

css-tricks.com/injecting-line-break ...这可能会有所帮助
似乎任何 html 序列都被自动转义了，有什么办法可以关闭该功能吗？我不熟悉打字稿或角度，所以只是一个建议。
添加 \n 不起作用吗？ “系统警报\n发生了什么事”
@Call_Back_Function 我试过了，不，它不起作用。

标签： javascript html angular typescript

【解决方案1】：

随便用

<span [innerHTML]="myAlertMessage"></span>

innerHTML 属性将解释您的 html 代码。

【讨论】：

【解决方案2】：

至少对于 Angular v2.1.1，解决方案是使用[innerHTML]="myAlertMessage"。没有必要使用“bypassSecurityTrustHtml”来换行或列表工作。

【讨论】：

【解决方案3】：

你可以使用像这样的管道

import { Pipe, Sanitizer } from '@angular/core';

@Pipe({name: 'safe'})
export class SafeHtml {
  constructor(private sanitizer:Sanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

并像使用它

<span [innerHTML]="myAlertMessage | safe"></span>

其中myAlertMessage 可以包含  或

另见In RC.1 some styles can't be added using binding syntax

【讨论】：

不兼容IE。还有其他想法吗？
信息不够。我建议您创建一个包含更多详细信息的新问题。

【解决方案4】：

尝试在您的myAlertMessage 文本中使用\n。类似的东西："\n Some alert text \n Newline of the alert text";

并在您的组件 HTML 文件中使用 <pre> html 标记，如下所示：

<div>
  <p><pre>{{ myAlertMessage }}</pre></p>
</div>

【讨论】：