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

Question

我有一个角度小部件，应该将其嵌入不同的站点，并且我对将其嵌入的站点一无所知。

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

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

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

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

@角度/材料

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

.mat-checkbox {...}

这不是很好的原因，因为它可能会干扰宿主网站的样式。

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

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

它们没有放在iframe中，它们只是对类名进行哈希处理（可能使用了像typestyle或postcss这样的js中的CSS库）对我来说是一个很好的解决方案-但是

如何从第三方设计（例如材料设计和角度引导）中哈希组件的类名？

我尝试过的事情：

• 用于创建Web组件的角度元素

• 字体样式

Answer 1

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