在角度组件中加载外部 html

Question

我正在为 Gmail 开发电子邮件客户端应用程序。当我加载一些电子邮件时，电子邮件正文中的样式也会影响我们应用程序的样式。很少有电子邮件直接具有段落和 div 标签的硬编码样式。如何将样式与外部来源隔离开来，使其仅适用于特定的 div 及其子元素？

导致问题的示例样式：

p, ul, ol {
    font-size: 17px;
    line-height: 24px;
    font-weight: normal;
    margin: 0;
    margin-bottom: 15px;
}

上述代码段标签的字体大小设置为 17px。无论我们使用段落标签，它都会在整个页面中应用。

将电子邮件正文设置为 Div 的代码：

<div  [innerHTML]="sanitizedemailBody" style="isolation: isolate;"></div>                        

我知道，如果我们使用 iframe，我们可以解决这个问题，但它会增加很多工作，因为我们需要处理 iframe 中锚标记的点击以及其他一些特定于应用程序的限制。有没有更好的方法来处理这个问题？

---

亚当斯宾塞的解决方案：

external-html.ts

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-external-html',
  templateUrl: './external-html.component.html',
  styleUrls: ['./external-html.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ExternalHtmlComponent implements OnInit {
  @Input('externalContent') externalContent: string;
  constructor() { }
  ngOnInit(): void {
  }

}

external-html.html

<div id="externaHtmlHandler" [innerHTML]="externalContent"></div>

并在父组件的 HTML 文件中添加以下行：

<app-external-html [externalContent]="currentMessage"></app-external-html>

Answer 1

您可以尝试在设置 innerHtml 的组件上使用 Shadow Dom 视图封装：https://angular.io/guide/view-encapsulation。缺点是您必须在该组件样式文件中重新定义所有必需的样式，并且需要一些时间来适应，而且浏览器支持对您来说可能是个问题。