Nebular 和 Angular 材质对话框的问题

Question

当我安装 nebular 主题时，我收到有关我使用的 angular 材料模态的错误。 我仅将 nebular 用于身份验证页面。 错误是ERROR TypeError: Cannot read properties of undefined (reading 'appendChild')我该怎么做才能解决这个问题？

Answer 1

Nebular 自动为Overlay container注入一个新的实现，所以当你使用任何使用 angular cdk overlay 的弹出窗口时，它将失败，除非 Nebular Overlay Container 可以找到它的元素，我的猜测是该元素是 nebular 布局组件，所以基本上你可以'不要在 nebular 布局之外使用任何对话框，您可以采用的一种解决方案是实现自己的 Overlay Container 并在具有 mat 对话框使用的模块中提供它。 像这样的

@Injectable()
export class MyOverlayContainer extends OverlayContainer implements OnDestroy {
  constructor(@Inject(DOCUMENT) document: Document, _platform: Platform) {
    super(document, _platform);
  }

  protected _createContainer(): void {
    super._createContainer();
    if (!this._containerElement) {
      return;
    }
    const parent = document.body;
    parent.appendChild(this._containerElement);
  }

  ngOnDestroy() {
    super.ngOnDestroy();
    this._containerElement = null;
  }
}

在你的模块中

 import { OverlayContainer } from '@angular/cdk/overlay';

 @NgModule({
 providers: [{ provide: OverlayContainer, useClass: MyOverlayContainer }]  
 })