ngBootstrap Modal 除非在第二次点击后才会显示

Question

我创建了一个名为

ImportCardModalComponent

的模态组件。 如果登录失败，必须打开该组件。像这样：

this.authSerivce.logInRegular(this.model).then(result => {
      console.log(result);
    }, error => {
      var importModal = this.modalService.open(ImportCardModalComponent);

    });

问题是除非我点击屏幕上的按钮两次并触发服务两次，否则对话框不会出现。 第一次单击按钮时，DOM 元素已成功添加，但

class

中没有 css

<ngb-modal-backdrop> and <ngb-modal-window>

。如下所示。 我第二次点击按钮时，

classes

正确显示。如下图：

模态背景元素中必须有

class ="modal-backdrop fade show"

。以及窗口元素中的

class="modal fade show d-block"

。

我尝试将 modalService 与

NgbModalOptions

backdropClass

和

windowClass

一起使用，但第一次没有成功。

如果我将开放模式服务移到拒绝回调之外，它工作正常。

非常感谢任何帮助。

Answer 1

一种方法是在模态服务调用后手动触发变化检测。

获取

ApplicationRef

的参考

constructor(private appRef: ApplicationRef,...){} 

然后调用变化检测：

this.authSerivce.logInRegular(this.model).then(result => {
      console.log(result);
    }, error => {
      var importModal = this.modalService.open(ImportCardModalComponent);
      this.appRef.tick();
    });

Answer 2

您可以通过在 ngZone 中运行代码来强制进行 Angular 变化检测

import { NgZone } from "@angular/core";

...

constructor(private _ngZone: NgZone){}

...

this._ngZone.run(() => this.modalService.open(ImportCardModalComponent));