Question

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

问题是HTML内置样式标记的CSS。 CSS是一种通用的，它们在主体上添加自己的字体和自己的字体大小。

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

this.domSanitizer.bypassSecurityTrustHtml(htmldata);

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

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() {
  }
}

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

1 个答案: