css 样式不适用于Angular 中的innerHTML [duplicate]

fykwrbwg  于 2023-03-20  发布在  Angular
关注(0)|答案(3)|浏览(146)

此问题在此处已有答案

Angular 2 - innerHTML styling(11个答案)
5年前关闭。
我将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>';
q5iwbnjs

q5iwbnjs1#

你得到的这个行为是正常的。添加到innerHTML的类被忽略了,因为默认情况下封装是Emulated。这意味着Angular防止样式在组件内部和外部截取。你应该在你的组件中将封装改为None。这样,你就可以在任何你想要的地方定义类:在styles中或在单独的.css.scss.less样式表中(无所谓),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>';
  }
}
m528fe3b

m528fe3b2#

我也面临着同样的问题,但在阅读下面的链接后,我想出了解决方案,它是不使用管道
希望这对你有帮助。
https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90

vq8itlhq

vq8itlhq3#

我将样式放在一个类中,而不是内联样式。
不确定使用class是否适合您,但这里有一个Plunker demo
超文本:

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

在全局根css文件中定义类demo,通常称为styles.scss
CSS:

.demo{
    background-color: blue;
}

相关问题