创建托管角度小部件时的角度完全封装答案

【问题标题】：Angular full encapsulation when creating a hosted angular widget创建托管角度小部件时的角度完全封装
【发布时间】：2019-03-21 07:53:31
【问题描述】：

我有一个角小部件，应该嵌入到不同的网站中，但我不知道将嵌入它的网站。

我无法将小部件放在 IFrame 中。

这意味着小部件应该 100% 封装。

小部件正在使用某些库中的组件，例如：

角度引导 - https://angular-ui.github.io/bootstrap/

@角度/材质

这些库中的一些组件正在使用视图封装设置为无，这意味着一个问题是我的头会包含以下内容：

.mat-checkbox {...}

这不好，因为它可能会干扰主机网站样式。

另一个问题是我买不起像 .mat-checkbox 这样的类名因为这意味着主机站点可以加载材料设计模板并更改我的小部件外观。

我检查了其他公司的解决方案，例如 hotjar

他们不放在 iframe 中，他们只是散列他们的类名（可能在 js 中使用 css 库，如 typestyle 或 postcss），这对我来说是一个很好的解决方案 - 但是

我如何从第三方库（如材料设计和角度引导）中散列组件的类名？

我尝试过的事情：

用于创建 Web 组件的 Angular 元素
字体样式

【问题讨论】：

标签： angular

【解决方案1】：

您可以尝试的一件事，不是 Angulary 是使用 TreeWalker 在 ngAfterViewInit 生命周期钩子中遍历小部件中的所有节点，并以您喜欢的方式使用 Renderer2 更改类。 TreeWalker 受 domino 支持，因此它甚至可以与 Angular Universal 一起使用。

【讨论】：

TreeWalker 或 MutationObserver 是知道发生变化的好解决方案，是的，我可以使用 Renderer2。此解决方案适用于更改类名。性能方面，最好只反映私有平台浏览器服务：DefaultDomRenderer2，它也适用于我，性能要好得多。我现在遇到的问题是我还需要更改样式以匹配这些类名，因此我需要以某种方式更改角度材质样式并对这些类名进行哈希处理，并将它们与我在 DOM 中更改的类名匹配。

【解决方案2】：

您已经写过您尝试过角度元素，但没有提及您是否遇到任何问题。我正在创建一个项目，该项目存在于其他项目中，并在运行时分析他们的项目。对我来说，角度元素非常适合。如果你在你的根组件中使用encapsulation: ViewEncapsulation.ShadowDom，你的样式将自动被限定。您也可以在非 Angular 项目中使用它们。

【讨论】：

我尝试了带有角度元素的 ViewEncapsulation.ShadowDom。问题是当使用 ViewEncapsulation.None 嵌入第 3 方组件时，例如 @angular/material BottomSheet。像这样的组件，即使它们使用 ShadowDom 嵌套在我的元素中，仍然会将它们的样式写入宿主样式的 head 部分。尝试在您的小部件中嵌入 BottomSheet 并检查您将看到这些样式的头部部分。