角2 SVGがレンダリングされない

Question

私のアプリケーション内にあるSVGイメージをレンダリングするコンポーネントを作成しました。

しかし、私のデモアプリは単純なバージョンを表示するだけで、動的に読み込まれます。

http://plnkr.co/edit/g2tZXeUAMJ5zESx2EHT0?p=info

私は、コールが正しいですが、SVGがロードされていない<div [innerHTML]="data"></div>と<div> {{ data }} </div>

を試してみました。私はいつか解決策を見つけるのに苦労して過ごしましたが、私が手にしたのはそれが被害者であるということでした。

innerHTMLは感染していると考えられ、補間は無視されています。生のsvgテキストが表示されます。

ありがとうございました

Answer 1

角度は内容を消毒しています。あなたのHTMLを信頼できることをAngularに明示的に伝えるには

'@ angular/core'から{pipe、Sanitizer}をインポートしてください。

再利用可能なパイプを使用するか、sanitizer.bypassSecurityTrustHtml(html)を直接呼び出すことができます。あなたが行く前に

@Pipe({name: 'safe'}) 
export class SafeHtml { 
    constructor(private sanitizer:Sanitizer){} 

    transform(html) { 
    return this.sanitizer.bypassSecurityTrustHtml(html); 
    } 
} 

と

[innerHTML]="data | safe" 

Plunker example

ようにそれを使用するには、In RC.1 some styles can't be added using binding syntax