Question

我正在使用Angular 2+ [innerHTML]输入来插入HTML格式，包括样式标记。

在我的模板中，我有类似的内容：

<span [innerHTML]="someVar"></span>

在我的组件中，我有：

someVar = `<span style="background-color:#990000">test</span>`;

我收到警告：

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

在输出中，插入的跨度完整，减去样式属性。

所以我使用了这篇文章中的管道：

https://stackoverflow.com/questions/37076867/

看起来像：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

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

  transform(html): SafeHtml {
    // return this.sanitizer.bypassSecurityTrustStyle(style);
    return this.sanitizer.bypassSecurityTrustHtml(html);
    // return this.sanitizer.bypassSecurityTrustScript(value);
    // return this.sanitizer.bypassSecurityTrustUrl(value);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}

这与以前没有任何区别，但我不确定我是否以正确的方式使用......

如何使用innerHTML让Angular保留我的样式属性？

Answer 1

你快到了。您只需要确保使用管道作为HTML字符串。

示例管道：

import {Pipe} from '@angular/core'; 
import {DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl} from '@angular/platform-browser';
@Pipe({
name: 'safe'
})
export class SafePipe {

constructor(protected sanitizer: DomSanitizer) {}

  transform(htmlString: string): any {
    return this.sanitizer.bypassSecurityTrustHtml(htmlString);
  }
}

使用示例：

<span [innerHTML]="someVar | safe"></span>

希望这有帮助！

Answer 2

您可以使用此过滤器，也可以在代码中使用此过滤器。

要应用过滤器，您需要在HTML中使用它：

<span [innerHTML]="someVar | safeStyle"></span>

使用Angular 2+ [innerHTML]添加包含样式属性的html

2 个答案: