Question

我正在使用NgbModal。当我单击x或关闭时，调用this.activeModal.close（）或this.activeModal.dismiss（）会引发以下错误：

ReportProblemDialogComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'removeChild' of null
at NgbModalRef._removeModalElements (modal-ref.js?5ad7:114)
at NgbModalRef.dismiss (modal-ref.js?5ad7:108)
at NgbActiveModal.activeModal.dismiss (modal-stack.js?0971:36)
at ReportProblemDialogComponent.ngOnDestroy (report-problem-dialog.component.ts?631e:150)
at callProviderLifecycles (core.js?593e:12697)
at callElementProvidersLifecycles (core.js?593e:12658)
at callLifecycleHooksChildrenFirst (core.js?593e:12641)
at destroyView (core.js?593e:14007)
at callWithDebugContext (core.js?593e:15041)
at Object.debugDestroyView [as destroyView] (core.js?593e:14592)

在重新加载组件之后，它仍然保持打开状态，并且在重定向到另一个页面之后，它仍在显示。如何关闭NgbModal？

这是我打开模式的服务：

open(component: Component): Promise<NgbModalRef> {

    return new Promise<NgbModalRef>((resolve, reject) => {
        const isOpen = this.ngbModalRef !== null;
        if (isOpen) {
            resolve(this.ngbModalRef);
        }
        // setTimeout used as a workaround for getting ExpressionChangedAfterItHasBeenCheckedError
        setTimeout(() => {
            this.ngbModalRef = this.reportProblemModalRef(component, new Object());
            resolve(this.ngbModalRef);
        }, 0);

    });
}

reportProblemModalRef(component: Component, ticket: any): NgbModalRef {

    const modalRef = this.modalService.open(component, { size: 'lg', backdrop: 'static'});
    modalRef.componentInstance.ticket = ticket;
    modalRef.result.then((result) => {
        this.router.navigate([{ outlets: { popup: null }}], { replaceUrl: true, queryParamsHandling: 'merge' });
        this.ngbModalRef = null;
    }, (reason) => {
        this.router.navigate([{ outlets: { popup: null }}], { replaceUrl: true, queryParamsHandling: 'merge' });
        this.ngbModalRef = null;
    });
    return modalRef;
}

Answer 1

在 .html 文件中，使用以下代码

<button type="button" class="close" aria-label="Close" (click)="dismiss('Cross click')">
          X
          </button>

在 .Ts 文件中，使用以下代码

 constructor(private modalService: NgbModal) {

  }



dismiss() {
    this.modalService.dismissAll();
  }

为什么NgbModal在关闭/关闭时抛出错误？

1 个答案: