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

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

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


当前回答

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

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

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

其他回答

如果[innerHTML]包含用户创建的内容,直接使用[innerHTML]而不使用Angular的DOM消毒器是不可取的。@GünterZöchbauer在他的回答中建议的safeHtml管道是一种净化内容的方法。下面的指令是另一个指令:

import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
  SimpleChanges } from '@angular/core';

// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
  @Input() safeHtml: string;

  constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}

  ngOnChanges(changes: SimpleChanges): any {
    if ('safeHtml' in changes) {
      this.elementRef.nativeElement.innerHTML =
        this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
    }
  }
}

被使用

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

您可以使用几种方法来实现该解决方案。正如已经批准的答案中所说,你可以使用:

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

根据你想要实现的目标,你也可以尝试其他东西,比如javascript DOM(不推荐,DOM操作很慢):

演讲

<div id="test"></test>

组件

var p = document.getElementsById("test");
p.outerHTML = myVal;

属性绑定

Javascript DOM外部HTML

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

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

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

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

使用规范形式如下:

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

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

参见工作stackblitz示例

我们总是可以将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>