Bootstrap模态窗口未在角度5的路线变化时关闭

Question

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

在一些研究中我找到了类似的东西，在点击模态窗口的先前引导版本中，我们用来查看特定组件内部的模态窗口相关代码以及路径更改，因为组件被破坏，甚至模态窗口用于销毁。但是在当前版本中，我看到模态窗口相关的代码几乎在body标签的末尾，不会受到路由更改的影响。

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

Answer 1

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

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

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

Answer 2

我更新了我的代码，以便能够从应用程序的任何位置处理模态窗口。

在组件中：

import {SharedService} from './shared.service.ts';
constructor(private _sharedService: SharedService) {}
this._sharedService.openModal(content);
ngOnDestroy() {
   this._sharedService.closeModal();
}

在共享服务中：

modalRef: any;
openModal(modalname) {
this.modalRef = this.modalService.open(modalname);
}
closeModal() {
   if (this.modalRef) {
       this.modalRef.close();
   }
}

Answer 3

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 4

如果您的组件中有模态HTML，请在comp中尝试此操作。构造函数：

router.events.subscribe(val => {
  if (val) {
    $("#Model").modal("hide");
    $("#Model").hide();

  }
});