时间戳

首页 > 解决方案 > 如何将使用 innerHTML 注入的样式包含到 DOM 元素及其子元素中？

html - 如何将使用 innerHTML 注入的样式包含到 DOM 元素及其子元素中？

问题描述

我有一个从第三方获得的 HTML 页面。

问题是 HTML 带有样式标签内的 CSS。CSS 是一种通用的，他们在正文上添加自己的字体和自己的字体大小。

我正在使用带有 bypassSecurityTrustHtml 的 dom sanitizer 在我的应用程序上显示 HTML。

this.domSanitizer.bypassSecurityTrustHtml(htmldata);

现在添加新的 HTML 后，我的应用程序样式因此受到影响。除了在 iframe 中添加第三方 URL 外，我怎样才能避免这种情况？

标签： htmlcssangularangular-dom-sanitizer

解决方案

您正在寻找ViewEncapsulation.Native. 您将需要创建一个自定义组件，该组件仅包含您要注入 innerHTML 的 DOM 元素。

将此 ViewEncapsulation 设置为 Native 意味着它会创建 Shadow DOM，并确保它成为父元素并且所有样式和 DOM 引用都包含在其自身中。

将 ViewEncapsulation 设置为 Native 的示例。您将在此处提供您的 DOM 和 innerHTML 注入：

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
   styles: [
    `h1 {
      color: #367;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 250%;
    }
  `],
   encapsulation: ViewEncapsulation.Native
})
export class MyComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

推荐阅读