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 демонстрирует подход, если он вам действительно нужен.