Angular 2:清理HTML剥离了CSS样式中的某些内容

问题描述

我尝试在Angular 2组件中使用所见即所得的编辑器时，当我尝试预览编辑器的内容时​​(在将文本中心居中之后)，我收到此警告:

I am using a wysiwyg editor in my Angular 2 component, when i try to preview the content of the editor, (after i apply center to the text),i get this warning:

当我检查html时:

<p>Text Here...</p>

但是当我尝试使用console.log()预览编辑器的内容时​​，我得到了:

but when i try to use console.log() to preview the content of the editor i get:

<p style="text-align: center;">Text Here...</p>

推荐答案

出于安全原因，这是在Angular 2+中设计的.您可以使用 DomSanitizer 类来解决此问题.

This is by design in Angular 2+ for security reasons. You can workaround it by using the DomSanitizer class.

例如，您可以制作一个防止清除值的管道:

For example you can make a pipe that prevents sanitization of the value:

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

@Pipe({ name: 'noSanitize' })
export class NoSanitizePipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) {

   }
   transform(html: string): SafeHtml {
      return this.domSanitizer.bypassSecurityTrustHtml(html);
   }
}

然后您可以在绑定中使用它，例如:

Then you can use it in binding for example like this:

<div [innerHTML]="htmlText | noSanitize">
</div>

这篇关于Angular 2:清理HTML剥离了CSS样式中的某些内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！