Question

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

在一些研究中我发现了类似的东西，在点击模态窗口的先前引导版本中，我们用来查看特定组件内部的模态窗口相关代码以及路径更改，因为组件被破坏，甚至模态窗口用于销毁。但是在当前版本中，我看到模态窗口相关的代码几乎在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

如果您的组件中包含Modal HTML，请尝试在comp中尝试。构造函数：

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

  }
});

Answer 5

这是完整的代码

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

}

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

5 个答案: