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

Posted 2023-05-07

【中文标题】使用 Angular 2+ [innerHTML] 添加包含样式属性的 html

【英文标题】：Using Angular 2+ [innerHTML] to add html including style attributes

【发布时间】：2018-02-19 07:55:09

【问题描述】：

我正在使用 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).

在输出中，插入的 span 完好无损，减去 style 属性。

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

https://***.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);
  

这与以前没有什么不同，尽管我不确定我是否以正确的方式使用它...

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

【问题讨论】：

看这个帖子：***.com/a/34467699/5468463

谢谢。我应该做的。我不知道为什么它不是第一次...无论如何，在我的帖子中更新了管道。

【参考方案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>

希望这会有所帮助！

【参考方案2】：

您要么使用此过滤器，要么在您的代码中使用此过滤器。

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

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