Привязка 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, добавленный таким образом, соответствует их селекторам.

Обрабатывается только разметка, добавленная статически в шаблон компонентов.

Эквивалент $compile в Angular 2 демонстрирует подход, если он вам действительно нужен.