在做前端微服务化拆分的时候,当微应用是在主应用的某一个子路由的时候,即:子应用是挂载在主应用的某一个元素上的时候,子应用的Modal、Dropdown等组件会出现样式丢失的情况。
分析原因
在子应用的Modal、Dropdown等组件使用的时候,会在主应用的body中append一个div
元素,这个元素的class
属性为cdk-overlay-container
(这个很重要),但是由于当前的body是主应用,并不是子应用的body,两个应用的样式隔离,此时当前的这个组件是获取不到属于自己子应用的样式的。
解决
通过查看ng-zorro
的源码发现,这里使用到了angular-cdk
中的overlay
包。在overlay
包中有一个OverlayContainer
的API,可以通