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

Question

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

我尝试了什么：

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

我尝试了很多变化，但它只是不起作用。我是愚蠢的，错过了一些非常明显的东西吗？

不是重复，因为我尝试了<br/>但它没有用。

更新

变量正在浏览器HTML中打印，如{{title}}

Answer 1

这是两个明显可行的版本......

空格

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

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

h1 {
  white-space: pre;
}

<h1 id="example">

</h1>

Angular Version：

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

HTML Break

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

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

<h1 id="example">

</h1>

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

Answer 2

在html中添加样式：

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

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

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

Answer 3

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

Answer 4

尝试这样

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

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

Answer 5

你做对了。 但是如果你在浏览器中显示它，那么\ n就意味着必须。

你必须这样做：

title: string = "My<br>Title"

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