为什么样式不应用于 Angular 中的 InnerHTML？

Angular 中的 innerHTML 样式不起作用

问题陈述：

将 HTML 代码作为 innerHTML 传递到视图时，代码中定义的样式不会被应用。如果 HTML 代码不包含任何内联样式，则它会正确显示。但是，当内联样式（例如背景颜色）添加到 HTML 代码中时，它们将被忽略。

根本原因：

此行为的结果Angular 的默认组件封装被设置为“模拟”。模拟封装可防止 CSS 样式影响组件内部和外部的元素。

解决方案：

要允许应用innerHTML 中定义的样式，组件的封装必须改为“无”。这可以通过向应用程序添加以下附加代码来实现：

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>';
  }
}

将封装设置为“无”，innerHTML 中定义的样式将自动添加到 DOM，从而允许它们应用于由 HTML 代码创建的元素。

以上是为什么样式不应用于 Angular 中的 InnerHTML？的详细内容。更多信息请关注PHP中文网其他相关文章！