Question

我正在尝试在div中动态显示html。但是div ng-bind-html根本不显示（在Firefox，chrome和safari上）。

查看该网站的其他帖子，我发现我必须包括ngSanitize。

我在https://www.npmjs.com/package/angular-sanitize处找到了这个片段：

angular.module('myApp', ['ngSanitize']);

但是我不知道我应该在哪里写这段代码...你知道我该怎么做吗？

非常感谢您！

这是我的代码：

component.ts中的代码：

import { Component, OnInit, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-player-filter',
  templateUrl: './player-filter.component.html',
  styleUrls: ['./player-filter.component.css']
})
export class PlayerFilterComponent implements OnInit {

  text = '<h1>Test</h1><script></script>';
  text_sanitized: SafeHtml;
  constructor(private _sanitizer: DomSanitizer) { }

  ngOnInit() {
      this.text_sanitized = this.htmlProperty;
  }

  public get htmlProperty(): SafeHtml {
      return this._sanitizer.sanitize(SecurityContext.HTML, this.text);
  }

}

component.html中的代码：

<div ng-bind-html="text_sanitized"></div>
Normal: {{text}} Sanitized: {{text_sanitized}}

firefox上的输出：

Normal: <h1>Test</h1><script></script> Sanitized: <h1>Test</h1>

输出控制台：

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

控制台输出显示发生了清理操作（由清除了脚本的清理后的输出确认）。奇怪的是，显示不安全的html不会在控制台中显示任何错误...

Answer 1

'ng-bind-html'属于angularJS（angular 2+之前的旧版本），因此它不能与Angular 6一起使用或显示任何内容。

使用[innerHTML]代替Agular Documentation中所述：

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

AngularJs清理并显示html

1 个答案: