angular - 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 与它们的选择器匹配，也不会创建任何组件或指令。

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

如果你真的需要它，Angular 2 中的 $compile 等价物演示了一种方法。