web-dev-qa-db-ja.com

angular 2？

Htmlページで以下の補間を使用しました。

<div>{{config.CompanyAddress.replace('\n','<br />')}}</div>

そしてまた使用される

<div>{{config.CompanyAddress.toString().replace('\n','<br />')}}</div>

しかし、両方とも以下のようにテキストを表示しています

{{config.CompanyAddress.replace('\n','<br />')}}
{{config.CompanyAddress.toString().replace('\n','<br />')}}
javascriptangularstring-interpolation
10
Nimesh Vaghasiya

同じためにパイプを使用できます：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\n/g, '<br/>');
  }
}

パイプをアプリに含めるには、@ NgModule宣言に含める必要があります。テンプレートにHTMLを表示するには、バインディングouterHTMLを使用できます。

<span [outerHTML]="config.CompanyAddress | replaceLineBreaks"></span>
20
Siddharth Sharma

{{}}は文字列補間用であり、結果は常に文字列として追加されます。この場合、式に含まれる<と>が原因でバインディングがまったく機能しません。{{}}は期待どおりに解釈されません。

<div [innerHTML]="replaceLineBreak(config.CompanyAddress) | safeHtml"></div>

と

replaceLineBreak(s:string) {
  return s && s.replace('\n','<br />');
}

あなたがしたいことをする必要があります。 @hgoeblで述べたように、いくつかの場所で必要な場合は、replaceLineBreakもパイプとして実装できます。

プランカーの例

Hint：メソッドは変更検出サイクルごとに呼び出されるため、メソッドに直接バインドすることはお勧めしません。純粋な（デフォルトの）パイプは、入力値が変更されたときにのみ呼び出されます。したがって、パイプはより効率的です。

別の方法は、置換を1回だけ行い、replaceLineBreakを繰り返し呼び出すのではなく、置換された改行で値にバインドします。

ヒント：おそらく最初の改行だけでなく、すべての改行を置き換えたいと思うでしょう。 1。それを行う方法を説明するJSの質問は十分にあるので、私は気にしませんでした。

10
Günter Zöchbauer