Angular2 insideHtml 绑定(bind)破坏了数据绑定(bind)

Question

我试图在保持数据绑定(bind)的同时绑定(bind)到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 文件的内容(这就是为什么我需要绕过SecurityTrustHtml)并且经常更改，因此我无法将其放入我的模板中(它可能来自20 个不同的 SVG 文件)。

如果有办法动态设置组件的templateUrl，也能解决我的问题，但是找了好久好像不太可能。

Answer 1

Angular2 不处理动态添加的 HTML，因此 {{}}、[]、()、... 不是'不应该工作。 即使以这种方式添加的 HTML 与其选择器相匹配，也不会创建任何组件或指令。

仅处理静态添加到组件模板的标记。

Equivalent of $compile in Angular 2如果您确实需要的话，将演示一种方法。