我正在编写 Angular 应用程序，并且要显示 HTML 响应。
我怎么做？如果我仅使用绑定语法{{myVal}}它将对所有 HTML 字符进行编码（当然）。
我需要以某种方式将div的innerHTML绑定到变量值。
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
}
}和文档： https : //angular.io/api/platform-browser/DomSanitizer
安全警告
信任用户添加的 HTML 可能会带来安全风险。前面提到的文档状态：
调用任何
bypassSecurityTrust...APIbypassSecurityTrust...传入的值禁用 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 环境中。我不建议这样做，因为它会使代码更混乱，但有时没有其他选择。