为什么我的 CSS 不适用于 Angular 中的 InnerHTML 内容？

为什么在 Angular 中 CSS 不应用于 InnerHTML 内容？

在 Angular 中，使用 innerHTML 属性将 HTML 内容注入到视图中问题：样式可能无法按预期应用。这是由于 Angular 的封装机制，它可以防止外部样式干扰组件内的内容。

了解 Shadow DOM 封装

默认情况下，Angular 使用模拟封装，创建影子 DOM 并隔离组件样式。因此，在组件范围之外、由innerHTML注入的HTML中定义的样式将被忽略。

解决方案：将封装更改为None

要解决此问题，您可以通过在组件中将封装设置为 None 来覆盖 Angular 的封装。这将允许将来自外部源的样式应用于注入的 HTML 内容。

这是一个示例：

<code class="typescript">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 {
  someHtmlCode = `<div class="demo"><b>This is my HTML.</b></div>`;
}</code>

通过将封装设置为 None，我们禁用 Angular 的影子 DOM 并允许 CSS在注入的 HTML 中生效。因此，注入的 HTML div 中的文本将以蓝色背景色呈现。

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