25

我正在使用 ngx 翻译。

如何在要翻译的字符串中放置换行符？

在我的模板中，我有：

{{'STRING_TO_TRANSLATE' | translate}}

在我的 en.json 中：

{
"STRING_TO_TRANSLATE": "text on first line. <br> or \n don't work. Text on second line"
}
4

4 回答 4

42

您可以使用\n但您必须提供一些样式。

所以在你的模板中使用这个：

<div class="my-translated-paragraph">
    {{'STRING_TO_TRANSLATE' | translate}}
</div>

你的 en.json：

{
"STRING_TO_TRANSLATE": "text on first line.\nText on second line"
}

您的 (s)CSS 文件：

.my-translated-paragraph{
    white-space: pre-wrap;
}

更多信息以及空白背后的魔力：https ://stackoverflow.com/a/42354356/3757110

另请参阅关于此的 github 问题：https ://github.com/angular-translate/angular-translate/issues/595

于 2019-06-17T08:52:36.270 回答
17

有用！但不是

{{'STRING_TO_TRANSLATE' | translate}}

你应该做

<div [innerHTML]="'STRING_TO_TRANSLATE' | translate"></div>

<br/>s应该可以正常工作，但在其他情况下，您可能需要一些额外的“安全 html 管道”，即：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'mySafeHtmlPipe'})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  public transform(htmlContent) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlContent);
  }
}
于 2017-08-22T13:36:41.453 回答
2

这种情况可以通过一种或另一种方式解决，但恕我直言，真正的解决方案是：

.container {
    white-space: pre-line;
}

pre-wrap 和 pre-line 之间存在显着差异。预包装将导致浏览器保留所有空格，因此您将获得第一行缩进。前置行会将我们的空白序列折叠成一个空白，并且不会出现缩进。

您可以在 MDN 文档中阅读更多相关信息，实际链接如下：

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

于 2021-02-22T11:41:34.913 回答
0

如果你想要<p></p>for\n\n和<br />for \n，这是我的解决方案：

第 1 步：按照我在此评论中所说的做

第2步：像这样链接你的管道：

<div [innerHTML]="'YOUR_TRANSLATE_WITH_\n_OR_\n\n_GOES_HERE' | translate | nl2pbr"></div>

有关在此处链接管道的更多信息：https ://angular.io/guide/pipes#chaining-pipes

于 2018-07-09T00:31:28.263 回答