Bootstrap 模态窗口在角度 5 中的路线更改时未关闭答案

【问题标题】：Bootstrap modal window not closing on route change in angular 5Bootstrap 模态窗口在角度 5 中的路线更改时未关闭
【发布时间】：2018-01-11 05:45:40
【问题描述】：

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

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

有什么方法可以关闭路由改变的模式？

【问题讨论】：

标签： bootstrap-modal angular5 ng-bootstrap

【解决方案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();        

      }

    });

  }

}

【讨论】：

您使用导航事件关闭模式的想法对我有帮助，谢谢。在我的 Angular 4 应用程序中，它使用了一些香草（不是 ng-）引导模式，我必须确保模式在任何导航事件上都关闭，我发现NavigationStart 事件比NavigationEnd 更方便.我最终关闭了如下if (event instanceof NavigationStart) { $('#settingsModal').modal('hide'); $('#reviewModal').modal('hide'); } 的模态

【解决方案2】：

尝试在你的父组件上定义 ngOnDestroy，并在路由改变时检查 modal 是否打开。

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

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

【讨论】：

感谢 Oleksandr Oleksiv。我早就修复了这个问题，看起来和你的很相似，但忘记更新了。

【解决方案3】：

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

在组件中：

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();
   }
}

【讨论】：

【解决方案4】：

如果你的组件中有模态 HTML，请在 comp.构造函数：

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

  }
});

【讨论】：

【解决方案5】：

另一种选择。在父级上在其constructor 中声明模态服务：

constructor(private modalService: NgbModal) { }

接下来，在 ngOnDestroy 上，关闭所有模式：

ngOnDestroy() {
    this.modalService.dismissAll();
}

这样，如果缺少任何东西，您就不会从另一个组件中签入ngOnInit。

【讨论】：

【解决方案6】：

这是完整的代码

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  router: Router;
  modalService: NgbModal;

  constructor(router: Router, modalService: NgbModal) {
    this.router = router;
    this.modalService = modalService;
  }

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // close all open modals
        this.modalService.dismissAll();
      }
    });
  }

}

【讨论】：