Angular DomSanitizerが角度成分を結合していません

Question

DIVに動的にhtmlコンテンツを追加しようとしています。静的にこれはうまく動作します。

作品コード：

<popover-content #pop1 
       title="Cool Popover" 
       placement="right" 
       [closeOnClickOutside]="true"> 
    Popped up!!! 
</popover-content> 

<div> 
    <span>Testing with <span [popover]="pop1" [popoverOnHover]="true">popover</span> as they are not working with DomSanitizer</span> 
</div> 

今、私は、バックエンドでこのdivのコンテンツを生成して、動的にdivの内側にこれを追加する必要がありますする必要があります。

動作しませんコード： HTML：

<popover-content #pop1 
        title="Cool PopOver" 
        placement="right" 
        [closeOnClickOutside]="true"> 
     Popped up!!! 
    </popover-content> 

    <div [innerHtml]="message | safeHtml"> 
    </div> 

.TSファイル：

this.message = '<span>Testing with <span [popover]="pop1" [popoverOnHover]="true">popover</span> as they are not working with DomSanitizer</span>' 

パイプ：

import {Pipe, PipeTransform} from '@angular/core'; 
import {DomSanitizer} from '@angular/platform-browser'; 

@Pipe({ 
    name: 'safeHtml' 
}) 
export class SafeHtmlPipe implements PipeTransform { 

    constructor(private sanitized: DomSanitizer) { 
    } 

    transform(value) { 
    return this.sanitized.bypassSecurityTrustHtml(value); 
    } 

} 

これ以降、popoverコンポーネントも呼び出されませんでした。

DFPに動的にinnerHtmlコンテンツを追加した場合、angleはタグ属性に特別な動作を追加していないことがわかりました。なぜそうなのか？ どうすれば動作させることができますか？

Answer 1

[innerHTML]="..."を使用すると、DOMにHTMLを追加できますが、Angularはサニタイズを除きHTMLに含まれているものを気にしません。

角型コンポーネント、ディレクティブ、イベント、プロパティーのバインドコンポーネントテンプレートに静的に追加されたHTMLの作業。

あなたができることは、実行時にコンポーネントテンプレートを使用してHTMLをコンパイルすることです。How can I use/create dynamic template to compile dynamic Component with Angular 2.0?