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"
}

Answer 1

有效！但不是

{{'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);
  }
}

Answer 2

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

因此在模板中使用此：

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

您的en.json：

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

您的CSS文件：

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

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

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

Answer 3

这种情况可以通过一种或另一种方式解决，但恕我直言，真正的解决方案，没有任何肮脏的技巧是：

<label class="personal-label">Gender group</label>
    <select class="personal-type personal-select" name="gender_group" id="gender_group">
    <option value="">Select Gender</option>
    <option value="ALL" @if(@Auth::guard('web')->user()->gender_group=='ALL') selected @endif>ALL</option>
    <option value="M" @if(@Auth::guard('web')->user()->gender_group=='M') selected @endif>Male</option>
    <option value="F" @if(@Auth::guard('web')->user()->gender_group=='F') selected @endif>Female</option>
    </select>

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

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

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

Answer 4

如果您想要<p></p>的{{1}}和\n\n的{{1}}，这是我的解决方案：

步骤1：按我说的in this comment

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

<br />

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

把新行放在字符串中进行翻译

4 个答案:

步骤1：按我说的in this comment

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