在要翻译的字符串中加入换行符。

Question

我正在使用ngx-translate。

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

在我的模板中，我有：

{{'STRING_TO_TRANSLATE' | translate}}

在我的en.json文件中：

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

- Lev

Answer 1

你可以使用\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://dev59.com/sVsV5IYBdhLWcg3wngCy#42354356

此外，还可以查看有关此事的 Github 问题：https://github.com/angular-translate/angular-translate/issues/595

- jvoigt

Answer 2

它能够工作！但是需要改成

闭合标签。

{{'STRING_TO_TRANSLATE' | translate}}

你应该这样做

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

<br/> 应该可以正常工作，但在其他情况下您可能需要一些额外的“安全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);
  }
}

- Pijotrek

Answer 3

这个问题可以通过某种方式解决，但是在我看来，没有任何不正当手段的真正解决方案是：

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

pre-wrap 与 pre-line 之间有显著的区别。pre-wrap 将导致浏览器保留所有空格，因此您将获得第一行缩进。pre-line 将折叠我们的空格序列为单个空格，并且不会发生缩进。
您可以在 MDN 文档中了解更多信息，实际链接如下：

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

- Tyiliyra

Answer 4

如果您想要将<p></p>转换为\n\n，并且将<br />转换为\n，这是我的解决方案:

步骤1: 按照我在此评论中所说的做

步骤2: 像这样链接您的管道：

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

关于管道链的更多信息，请参见：https://angular.io/guide/pipes#chaining-pipes

- Elron