为什么我的 innerHTML 不尊重 Angular 中的样式，我该如何修复它？-css教程-PHP中文网

为什么我的 innerHTML 不尊重 Angular 中的样式，我该如何修复它？

Susan Sarandon

发布： 2024-10-28 16:15:02

原创

685 人浏览过

Why is my innerHTML not respecting styles in Angular and how can I fix it?

innerHTML 不尊重 Angular 中的样式

在 Angular 中，使用 innerHTML 来显示 HTML 可能会带来样式问题，特别是在尝试应用 CSS 时HTML 代码中的样式。出现此行为的原因是 Angular 的默认封装模式（模拟）可防止外部样式干扰组件的内部样式。

解决方案：

要解决此问题并在内部启用样式innerHTML，需要将封装模式切换为None。这允许 Angular 应用来自内部和外部源的样式：

从 @angular/core 导入 ViewEncapsulation 枚举。
在 Angular 组件中，将封装属性设置为 ViewEncapsulation。无。
使用组件模板中的内联样式或外部 CSS/SCSS/LESS 文件定义样式。 Angular 会自动将它们添加到 DOM 中。

示例：

<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 {
  private someHtmlCode = '';

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

登录后复制

通过这种方法，您现在可以将 CSS 样式应用到通过innerHTML 渲染的 HTML在你的 Angular 应用程序中。

以上是为什么我的 innerHTML 不尊重 Angular 中的样式，我该如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！