首页 > web前端 > css教程 > 为什么样式不应用于 Angular 中的 InnerHTML?

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

Barbara Streisand
发布: 2024-10-27 14:35:02
原创
932 人浏览过

Why Are Styles Not Applied to InnerHTML in Angular?

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板