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是一個SVG文件的內容（這就是爲什麼我需要bypassSecurityTrustHtml）和經常變化，所以，我不能把它放在我的模板（它可能來自於20個不同的SVG文件）。

如果有一種方法來爲組件動態設置templateUrl，它也可以解決我的問題，但經過很長一段時間的搜索似乎不可能。

Answer 1

Angular2不處理動態添加的HTML，因此{{}},[],()，...不應該工作。 也不會創建任何組件或指令，即使以這種方式添加的HTML與其選擇器匹配時也是如此。

只處理組件模板靜態添加的標記。

Equivalent of $compile in Angular 2演示了一種方法，如果你真的需要它。