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样式表中（它没有＆＃39; t））和Angular会自动将它们添加到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

Answer 3

我将样式放在一个类中，而不是内联样式。

不确定使用class是否适合您，但这是一个Plunker demo。

HTML：

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

CSS：

.demo{
    background-color: blue;
}

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

3 个答案: