协慌网

我正在编写 Angular 应用程序，并且要显示 HTML 响应。

我怎么做？如果我仅使用绑定语法{{myVal}}它将对所有 HTML 字符进行编码（当然）。

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

正确的语法如下：

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

于8.2.14运作

文档参考

Angular 2.0.0 和 Angular 4.0.0 final

为了安全的内容

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

DOM Sanitizer

需要使用 Angulars DOM 清理器将潜在的不安全 HTML 明确标记为受信任，因此不会剥离内容的潜在不安全部分

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

用类似的管道

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

另请参见在 RC.1 中，无法使用绑定语法添加某些样式

和文档： https : //angular.io/api/platform-browser/DomSanitizer

安全警告

信任用户添加的 HTML 可能会带来安全风险。前面提到的文档状态：

调用任何bypassSecurityTrust... API bypassSecurityTrust...传入的值禁用 Angular 的内置清理功能。仔细检查和审核进入此调用的所有值和代码路径。确保为此安全上下文适当地转义了所有用户数据。有关更多详细信息，请参见《 安全指南》 。

角度标记

就像是

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

与

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

不会导致 Angular 在foo处理任何特定于 Angular 的东西 。 Angular 在生成时用生成的代码替换了 Angular 特定的标记。 Angular 不会处理在运行时添加的标记。

要添加包含 Angular 特定标记（属性或值绑定，组件，指令，管道等）的 HTML，需要在运行时添加动态模块并编译组件。该答案提供了更多详细信息。 如何使用 / 创建动态模板以使用 Angular 2.0 编译动态组件？

在大多数情况下， [innerHtml]是一个不错的选择，但是对于很大的字符串或在 html 中需要硬编码的样式，它会失败。

我想分享其他方法：

您需要做的就是在 html 文件中创建一个 div 并为其指定一些 ID：

<div #dataContainer></div>

然后，在 Angular 2 组件中，创建对此对象的引用（此处为 TypeScript）：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    templateUrl: "some html file"
})
export class MainPageComponent {

    @ViewChild('dataContainer') dataContainer: ElementRef;

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }
}

然后只需使用loadData函数将一些文本附加到 html 元素。

这只是使用本机 javascript 的一种方式，但是在 Angular 环境中。我不建议这样做，因为它会使代码更混乱，但有时没有其他选择。

另请参阅Angular 2-innerHTML 样式