如何在Angularjs中的字符串插值中获得换行符

Posted 2023-02-22

【中文标题】如何在Angularjs中的字符串插值中获得换行符

【英文标题】：How to get line break within string interpolation in Angularjs

【发布时间】：2018-05-20 13:29:23

【问题描述】：

所以我正在尝试做一些非常简单的事情，但我被卡住了。我有一个 String 变量，在该变量中我想设置换行符，以便文本的某些部分转到新行。

我尝试过的：

title: string = "My \n Title";
title: string = "My\ Title";
title: string = "My\
Title";
title: string = "My" + "\n" + "Title";

我尝试了很多变体，但它只是不起作用。我是不是很愚蠢并且遗漏了一些非常明显的东西？

不是重复的，因为我尝试了<br/>，但没有成功。

更新：

变量正在浏览器 html 中打印，就像 title

【问题讨论】：

New Line '\n' is not working in Typescript的可能重复

@LucaKiebel 不是重复的，因为我已经尝试了该问题的解决方案，但它没有奏效。

@Skywalker 您希望换行符做什么？ \n 转义肯定在字符串中包含换行符。根据实际使用字符串的方式，可能会或可能不会检测到。

您到底想在哪里打印？重要的是：console.log 或浏览器 HTML 呈现的行为不同。

@rweisse 这是一种 linting 偏好，而不是标准。

【参考方案1】：

你做对了。 但如果您在浏览器中显示此内容，则 \n 表示 didley。

你必须这样做：

title: string = "My<br>Title"

现在如果你使用像 React 这样花哨的前端工具，你将不得不处理字符串中不安全的 HTML...

【讨论】：

这个问题被标记为“React”，JSX 将使用提议的代码呈现“MyTitle”。

公认的解决方案非常好，因为它纯粹是 CSS，与 React 或 Angular 无关。然而 JSX 不会渲染这个字符串。你必须这样做：<div dangerouslySetInnerHTML=__html: "My<br>Title"/>

【参考方案2】：

这里有两个可证明工作的版本...

空白

解决方案一...如果您希望在 HTML 中尊重换行符...（使用反引号字符串，或使用 'My \ntitle'...

document.getElementById('example').innerHTML = `My
title`;

h1 
  white-space: pre;

<h1 id="example">

</h1>

角度版本：

<h1 style="white-space: pre;">title</h1>

HTML 中断

解决方案二...你想使用 HTML...

document.getElementById('example').innerHTML = 'My<br />title';

<h1 id="example">

</h1>

如果你想allow HTML during binding，请使用 ng-bind-html。

【讨论】：

关闭，但 OP 正在使用 angularjs。只需将其设为<h1 style="white-space: pre;">title</h1>，这是 OP 的有效解决方案

嗨@mhodges 我想创建一个简短的工作示例......但我会添加一个注释。

【参考方案3】：

在html中添加样式：

<div style="white-space: pre-line">DialogText </div>

使用 '\n' 在打字稿中添加换行符。

this.DialogText = "Hello" + '\n' + "World";

stackblitz 中也一样：https://stackblitz.com/edit/angular-rpoxr5linebreak

【参考方案4】：

您也可以使用只读的textarea 元素代替<div 或<p> 来保持原始字符串的格式。

【参考方案5】：

这样试试

<div ng-bind-html="myMsg"></div>

$scope.myMsg =  `Below is the result:  <br>Successful:1,  <br>Failed:2`  // Use backtick