[解決済み] Angular2で生のhtmlをバインドする方法 [重複]。

質問

私はAngular 2.0.0-beta.0を使用しており、いくつかの簡単なHTMLを直接作成し、結合したいです。それは可能ですか、そしてどのように？

私は使用しようとしました

{{myField}}

のように記述しますが、myFieldのテキストはエスケープされてしまいます。

Angular 1.xではng-bind-htmlがヒットしましたが、2.xではサポートされていないようです。

thx フランク

どのように解決するのですか？

へのバインド innerHTML 属性

実現方法は2つあります。

<div [innerHTML]="myField"></div>
<div innerHTML="{{myField}}"></div>

の部分をAngularsのDOMサニタイザーが取り除かないように、渡されたHTMLを信頼できるとマークします。

<div [innerHTML]="myField | safeHtml"></div>

のようなパイプで

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
    // return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

参照 RC.1では、いくつかのスタイルはバインディング構文を使って追加することができません。