在做前端微服务化拆分的时候,当微应用是在主应用的某一个子路由的时候,即:子应用是挂载在主应用的某一个元素上的时候,子应用的Modal、Dropdown等组件会出现样式丢失的情况。
分析原因
在子应用的Modal、Dropdown等组件使用的时候,会在主应用的body中append一个div
元素,这个元素的class
属性为cdk-overlay-container
(这个很重要),但是由于当前的body是主应用,并不是子应用的body,两个应用的样式隔离,此时当前的这个组件是获取不到属于自己子应用的样式的。
解决
通过查看ng-zorro
的源码发现,这里使用到了angular-cdk
中的overlay
包。在overlay
包中有一个OverlayContainer
的API,可以通过写一个注入器来修改此API的容器从而得到解决。
- 注入器
CustomOverlayContainer
代码如下:
import { OverlayContainer } from '@angular/cdk/overlay';
import { Injectable } from "@angular/core";
@Injectable()
export class CustomOverlayContainer extends OverlayContainer {
_createContainer(): void {
let container = document.createElement('div');
container.classList.add('cdk-overlay-container');
document.querySelector('.devops').appendChild(container);
this._containerElement = container;
}
}
需要注意的是
container.classList.add('cdk-overlay-container');
中,这个class一定要是cdk-overlay-container
,否则会出现弹框都可以正常打开,但是属于这个组件的样式会丢失。
- 将其注入到
AppModule
中
在文件app.module.ts
的providers
数组中添加如下代码:
providers: [
{
provide: OverlayContainer,
useClass: CustomOverlayContainer
}
],
然后就会发现一切又正常了~