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

Question

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

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

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

this.domSanitizer.bypassSecurityTrustHtml(htmldata);

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

Answer 1

您正在寻找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() {
  }
}