记一次 - qiankun搭建微前端之vue3基座，angualr10.x子应用的踩坑之路（二） 子应用弹窗挂载到 body 上的样式问题

解决此问题也是头秃了好久，本人对angular技术栈不是很了解，查了很多资料，感谢大神们的植树造林，让我这个小卡拉米也能乘得一片阴凉。

踩坑的过程虽然痛苦，但在这个过程中吸收了很多有价值的信息，也拓宽了思路，这就是成长。

记录下这个问题，也给其他使用的友友们一个参考。

组件库 "ng-zorro-antd": "^10.1.1"
工具库是 "@angular/cdk": "10.2.7"

在 cdk 这个工具库中
有一个 OverlayContainer 的 API，可以通过写一个注入器修改挂载容器解决此问题

• 注入器 CustomOverlayContainer 代码

import { Injectable } from "@angular/core";
import { OverlayContainer } from "@angular/cdk/overlay";

@Injectable()
export class CustomOverlayContainer extends OverlayContainer {
  protected _createContainer(): void {
    // 创建div
    const container = document.createElement('div');
    // 添加类名
    container.classList.add('cdk-overlay-container');
    // 此处是想要挂载的dom
    document.querySelector("custome-app-root").appendChild(container)
    this._containerElement = container
  }
}

• 注意⚠️

通过F12审查元素发现：弹窗都挂载到

这个dom上，所以 classList.add 的类名一定是 cdk-overlay-container

• 在 app.modules.ts 的 providers 数中添加注入器

providers: [
    {
      provide: OverlayContainer,
      useClass: CustomOverlayContainer
    }
]