Angular2 innerHtmlバインディングはデータバインディングを中断します

Question

データバインディングを維持しながらinnerHtmlにバインドしようとしています。これは機能しません（出力{{myVar}}）。私の本当のアプリで

@Component({ 
    selector: "test", 
    template: ` 
    <div [innerHtml]="myHtml"></div> 
    `, 
}) 
export class TestComponent{ 
    title = "My Title"; 
    myHtml: SafeHtml; 

    constructor(private sanitizer: DomSanitizer){ 
    this.myHtml = sanitizer.bypassSecurityTrustHtml("<h1>{{title}}</h1>"); 
    } 
} 

、myHtmlは（私がbypassSecurityTrustHtmlに必要とする理由である）SVGファイルの内容であり、しばしば変化し、私は私のテンプレートにそれを置くことができないように（それは20の異なるSVGから来ることができましたファイル）。

コンポーネントのtemplateUrlを動的に設定する方法があった場合は、私の問題も解決しますが、しばらくの間は検索しても可能ではないようです。

Answer 1

Angular2はHTMLを動的に処理しないため、{{}},[],()、...は動作しません。 このように追加されたHTMLがセレクタに一致した場合でも、コンポーネントまたはディレクティブは作成されません。

コンポーネントテンプレートに静的に追加されたマークアップのみが処理されます。

Equivalent of $compile in Angular 2は、本当に必要な場合のアプローチを示しています。