我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
在Angular v2.1.1中工作
<div [innerHTML]="variable or htmlString">
</div>
其他回答
您可以使用几种方法来实现该解决方案。正如已经批准的答案中所说,你可以使用:
<div [innerHTML]="myVal"></div>
根据你想要实现的目标,你也可以尝试其他东西,比如javascript DOM(不推荐,DOM操作很慢):
演讲
<div id="test"></test>
组件
var p = document.getElementsById("test");
p.outerHTML = myVal;
属性绑定
Javascript DOM外部HTML
为了得到一个完整的答案,如果你的HTML内容是在一个组件变量中,你也可以使用:
<div [innerHTML]=componentVariableThatHasTheHtml></div>
你可以使用以下两种方法。
<div [innerHTML]="myVal"></div>
or
<div innerHTML="{{myVal}}"></div>
在Angular v2.1.1中工作
<div [innerHTML]="variable or htmlString">
</div>
我们总是可以将html内容传递给innerHTML属性以呈现html动态内容,但动态html内容也可能被感染或恶意。因此,在将动态内容传递给innerHTML之前,我们应该始终确保内容是经过消毒的(使用DOMSanitizer),这样我们就可以逃脱所有恶意内容。
试试下面的管子:
import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {
}
transform(value: string) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
Usage:
<div [innerHTML]="content | safeHtml"></div>