Angular学习笔记87：修改NG-ZORRO中Modal、Dropdown等组件挂载DOM

在做前端微服务化拆分的时候，当微应用是在主应用的某一个子路由的时候，即：子应用是挂载在主应用的某一个元素上的时候，子应用的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
    }
  ],

然后就会发现一切又正常了～