Angular 2，DomSanitizer，bypassSecurityTrustHtml，SVG [英] Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG

问题描述

我一直在将DomSanitizer与html字符串中的SVG一起使用.

I've been using DomSanitizer with an SVG in an html string.

在当前版本的Angular之前，它工作得很好:

Previous to the current version of Angular, this worked just fine:

this.domSanitizer.bypassSecurityTrustHtml(content);

现在我得到了一个叫做

SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity

现在是否有一种新的方法来访问DomSanitizer的输出?我应该以SafeHTML类型还是其他形式接收它?如果仍然可以过滤html，则拥有bypassSecurityTrustHtml有什么意义?

Is there now a new way to access the output of the DomSanitizer? Should I be receiving it as SafeHTML type or something? What's the point in having bypassSecurityTrustHtml if it still filters html?

在明信片上有答案吗?拜托...

Any answers on a postcard? Please...

推荐答案

演示:> ://plnkr.co/edit/Qke2jktna55h40ubUl8o?p = preview

DEMO : https://plnkr.co/edit/Qke2jktna55h40ubUl8o?p=preview

import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value))
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml]="html | safeHtml">
    </div>
  `,
})
export class App {
  name:string;
  html: safeHtml;
  constructor() {
    this.name = 'Angular2'
    this.html = "<svg> blah </svg>";
  }
}

这篇关于Angular 2，DomSanitizer，bypassSecurityTrustHtml，SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！