除非第二次单击，否则不会显示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();
    });