我有一个 Angular 小部件,应该将其嵌入不同的站点,并且我对将其嵌入的站点一无所知。
我无法将小部件放置在IFrame中。
这意味着该小部件应100%封装。
该小部件正在使用某些库中的组件,例如:
Angular 靴-https://angular-ui.github.io/bootstrap/
@ Angular/ Material
这些库中的某些组件使用的 View 封装设置为none,这意味着一个问题是我的头部将包含以下内容:
.mat-checkbox {...}
这不是很好的原因,因为它可能会干扰宿主网站的样式。
另一个问题是我负担不起 .mat-checkbox 这样的类名。
因为这意味着宿主站点可以加载 Material 设计模板并更改我的小部件外观。
我检查了其他公司的解决方案,例如 hotjar
它们没有放在iframe中,它们只是对类名进行哈希处理(可能使用了像typestyle或postcss这样的js中的css库),对我来说是一个很好的解决方案-但是
我如何从第三方设计库(例如 Material 设计和 Angular bootstrap )中哈希组件的类名?
我尝试过的事情:
最佳答案
您可以尝试的一件事是,不是Angulary使用TreeWalker遍历ngAfterViewInit
生命周期 Hook 中小部件中的所有节点,并以自己喜欢的方式使用Renderer2
更改类。 TreeWalker得到多米诺骨牌的支持,因此它甚至可以与Angular Universal一起使用。