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

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

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


当前回答

你也可以使用DOM属性绑定将angular组件的类属性与模板绑定。

例如:<div [innerHTML]="theHtmlString"></div>

使用规范形式如下:

<div bind-innerHTML="theHtmlString"></div>

Angular文档:https://angular.io/guide/template-syntax#property-binding-property

参见工作stackblitz示例

其他回答

只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件,并且对它不能像我一样工作感到沮丧,可以看看我写的ngx-dynamic-hooks库来解决这个问题。

有了它,您可以从动态字符串/html加载组件,而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer,但保留了加载组件的能力(以一种安全的方式)。

在这部《斯塔克布利茨》中可以看到它的作用。

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

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

or

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

正确的语法如下:

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

如果你想在Angular 2或Angular 4中使用它,同时还想保持内联CSS,那么你可以使用它

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