Angular2 innerHtml绑定中断数据绑定

我想绑定到innerHtml，同时保持数据绑定。这不起作用（输出{{myVar}}）。Angular2 innerHtml绑定中断数据绑定

@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，它也可以解决我的问题，但经过很长一段时间的搜索似乎不可能。

来源

2016-10-27 maxbellec

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

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

Equivalent of $compile in Angular 2演示了一种方法，如果你真的需要它。

来源

2016-10-27 08:50:17

您的链接似乎是我一直在寻找的，谢谢（对于这个以及你回答的其他一百个Angular2问题，帮助了我） – maxbellec

不客气:) –

Angular2 innerHtml绑定中断数据绑定

回答

相关问题