角度2の文字列を置き換えるには？

Question

私は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 />')}} 

Answer 1

あなたは同じのためのパイプを使用することができます。

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

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

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

Answer 2

{{}}以下のようにテキストを表示している文字列を補間するためのものであり、結果は常に文字列として追加されます。式の中に<と>が含まれているため、バインディングはまったく機能しません。{{}}は期待どおりに解釈されません。

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

と

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

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

Plunker example

ヒント：メソッドは、すべての変更検出周期で呼ばれているので、直接メソッドにバインドするために落胆しています。純粋な（デフォルトの）パイプは、入力値が変更されたときにのみ呼び出されます。したがって、パイプがより効率的です。

もう1つの方法は、交換を一度だけ行い、置換された改行で値にバインドし、replaceLineBreakを繰り返し呼び出すことです。

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