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 与它们的选择器相匹配。

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

演示了您确实需要的方法。

Angular2 innerHtml 绑定破坏了数据绑定

Angular2 innerHtml binding breaks data binding

typescript

angular2-databinding

angular