样式不适用于Angular 2 Typescript中的innerhtml

Question

我将html作为innerHtml传递给我的视图.以下是我的观点

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

如果我通过以下代码,它工作正常.

this.someHtmlCode = "<div><b>This is my HTML.</b></div>"

如果我传递下面包含颜色的代码,它就无法正常工作.

 this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';

Answer 1

你得到的这种行为是正常的.添加的类innerHTML被忽略,因为默认情况下封装是Emulated.这意味着Angular会阻止样式拦截组件的内部和外部.您应该将封装更改为None组件中的封装.这样一来,你就可以定义任何你想要类:内styles或在一个单独的.css,.scss或者.less样式表(没关系)和角度将它们自动添加到DOM.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})
export class Example {
  private someHtmlCode = '';

  constructor() {
    this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
  }
}

Answer 2

我也面临同样的问题,但在阅读下面的链接后,我想出了解决方案,并且没有使用管道

希望这会帮助你.

https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90