HTMLを含む変数の中でプロパティBLOBをプロパティにバインドするには？

Question

は、私はHTMLの文字列を含む変数を持っているのは、言ってみましょう：

let html = '<img src="https://example.com/image.png">'; 

どのように私はsrc属性への結合プロパティを設定することができますか？

私はhtml.replace('src', '[src]');を試みたが、私はそれは単なるテキストとして扱われていると思い、私はブロブとして画像を取得し、DomSanitizer.bypassSecurityTrustUrlを使用する場合、それは私に与えるので：だから

<img [src]="SafeValue must use [property]=binding: blob:file:///[GUID]"> 

とき、私は出力にHTMLをテンプレートは機能しません。

Answer 1

imgを含むHTMLはテンプレートではなく変数から来るため、img srcにプロパティバインディングを使用することはできません。その代わりに文字列置換を使用してimg src内のblob URLを設定し、DomSanitizer.bypassSecurityTrustHtmlを使用してコンポーネントのプロパティにsanitizedHTMLvariableという名前のhtml変数のセキュリティをバイパスします。そして、あなたがHTMLコンテンツを信頼することを提供する（したがって、この場合のBlob URLのセキュリティをバイパスする必要はありませんが、むしろ変数で完全なHTMLの内容に

<div [innerHTML]="sanitizedHTMLvariable"></div> 

を使用して、コンポーネントテンプレートにこのプロパティをバインドすることができます）。