除非第二次单击，否则不会显示ngBootstrap Modal

Question

我创建了一个名为ImportCardModalComponent的模式组件。 如果登录失败，则必须打开此组件。 如下所示：

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

    });

问题是，除非我单击屏幕上的按钮两次并两次启动服务，否则对话框不会出现。 第一次单击该按钮时，成功添加了DOM元素，但<ngb-modal-backdrop> and <ngb-modal-window>没有CSS class 。 如下所示。 第二次单击按钮时， 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();
    });