我正在写一个Angular应用程序,我有一个HTML响应,我想显示。

我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。

我需要以某种方式将一个div的innerHTML绑定到变量值。


当前回答

为了得到一个完整的答案,如果你的HTML内容是在一个组件变量中,你也可以使用:

<div [innerHTML]=componentVariableThatHasTheHtml></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>

<div [innerHTML]=“HtmlPrint”></div><br>

innerHtml是HTML-Elements的一个属性,它允许你以编程的方式设置它的html-content。还有一个innerText属性,它将内容定义为纯文本。

属性周围的[attributeName]="value"方括号定义了一个Angular输入绑定。这意味着,属性的值(在您的例子中是innerHtml)绑定到给定的表达式,当表达式结果改变时,属性值也会改变。

所以基本上[innerHtml]允许你绑定和动态改变给定html元素的html内容。

正确的语法如下:

<div [innerHTML]="theHtmlString"></div>

文档参考

你可以使用以下两种方法。

<div [innerHTML]="myVal"></div>

or

<div innerHTML="{{myVal}}"></div>

Angular 2+支持渲染HTML的[innerHTML]属性绑定。如果以其他方式使用插值,则它将被视为字符串。

转换成。html文件

<div [innerHTML]="theHtmlString"></div>

导入.ts文件

theHtmlString:String = "enter your html codes here";