Nebular 和 Angular Material 对话框的问题

Question

当我安装 nebular 主题时，我收到关于我使用的 angular material 模式的错误。我仅将 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 }]  
 })

Nebular 和 Angular Material 对话框的问题

Problem with Nebular and Angular Material Dialogs

angular-material

angular

nebular

material-dialog