javascript - ngBootstrap 模式不显示，除非在第二次点击之后

Question

我创建了一个名为 ImportCardModalComponent 的模态组件.
如果登录失败，必须打开该组件。如下:

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

    });

问题是对话框不会出现，除非我单击屏幕上的按钮两次并触发服务两次。
第一次点击按钮，DOM元素添加成功但没有css class在 <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();
    });