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演示了一种方法，如果你真的需要它。

Angular2 innerHtml绑定打破了数据绑定

1 个答案: