Bootstrap 模态窗口不会在角度 5 的路线更改时关闭

Question

在我的 Angular 5 应用程序中使用 "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.6" 版本时，一切看起来都很好。但是，如果我在模态窗口中有一个触发路线更改的按钮，则即使在路线更改之后，模态窗口也不会关闭。

在很少的研究中，我发现了类似的东西，在以前的引导程序版本中，点击模态窗口，我们用来查看特定组件内与模态窗口相关的代码，以及随着组件被销毁，甚至模态窗口被销毁时的路由更改。但是在当前版本中，我几乎在 body 标记的末尾看到了与模态窗口相关的代码，这些代码不受路由更改的影响。

无论如何要在路线更改时关闭模态？

Answer 1

ng-bootstrap 的第 4 版现在包括一个 dismissAll关闭所有打开模式的方法。它也可能早在 3.1 的版本中就存在，但我对此并不完全确定。

您可以在每次路由更改时从 app.component.ts 调用它，使用以下语法：

import { Router, NavigationEnd } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

export class AppComponent {

  constructor(router: Router, modalService: NgbModal) { }

  ngOnInit() 
  {

    this.router.events.subscribe(event => {

      if (event instanceof NavigationEnd) {

        // close all open modals
        this.modalService.dismissAll();        

      }

    });

  }

}

Answer 2

尝试在父组件上定义 ngOnDestroy 并检查路由更改时模态是否打开。

modalWindow = null;
openModal(){
 this.modalWindow.open('YourComponent')
}

ngOnDestroy(){
 if(this.modalWindow !== null) this.modalWindow.close()
}