我有一个 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 )中哈希组件的类名?

我尝试过的事情:
  • 用于创建Web组件
  • 的 Angular 元素
  • Typestyle
  • 最佳答案

    您可以尝试的一件事是,不是Angulary使用TreeWalker遍历ngAfterViewInit生命周期 Hook 中小部件中的所有节点,并以自己喜欢的方式使用Renderer2更改类。 TreeWalker得到多米诺骨牌的支持,因此它甚至可以与Angular Universal一起使用。

    09-10 09:55
    查看更多