web-dev-qa-db-ja.com

翻訳する文字列に改行を入れます

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"
}
angulartranslationngx-translate
8
Lev

できます！しかし、代わりに

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

\ 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/375711

これに関するgithubの問題も参照してください： https://github.com/angular-translate/angular-translate/issues/595

12
jvoigt

お望みならば <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

0
Elron