单击 NgbModal 背景时调用函数。角2模态答案

【问题标题】：function call on clicking NgbModal backdrop. anuglar 2 modal单击 NgbModal 背景时调用函数。角2模态
【发布时间】：2017-10-11 19:41:07
【问题描述】：

我正在尝试使用NgbModal 在单击angular2 中使用的模态的背景（阴影部分）时调用一个函数（比如说'randomFunction'）。

这里是companyNumberComponent.html：

<company-numbers-list (companyNumberModal)="modalService.open(companyNumberModal);"></company-numbers-list>

<template ngbModalContainer #companyNumberModal let-c="close" let-d="dismiss" id="companyNumberModal">
    <div class="modal-body">
        <company-number-modal></company-number-modal>
    </div>
    <div class="modal-footer text-center">
        <mi-button [type]="'info'" id="number_flow_close" [raised]="true" aria-label="close" (click)="c('Close click');
        ">Close</mi-button>
    </div>

这里是companyNumberComponent.ts 文件：

@Component
 .....
 export class companyNumberComponent(){
     constructor(private modalService: NgbModal){}
     public randomFunction(){
         console.log("hi");
     }
 }

有人可以建议我如何进行此操作或如何在模态的dismiss() 或close() 函数中调用此randomFunction()。

【问题讨论】：

标签： angular function bootstrap-modal call

【解决方案1】：

他们似乎在 docs 中找到了您要查找的内容，即ModalDismissReasons：

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

open(content) {
  this.modalService.open(content).result.then((result) => {}, (reason) => {
    if (reason === ModalDismissReasons.ESC || // if you want to check ESC as well
        reason === ModalDismissReasons.BACKDROP_CLICK) {
        this.randomFunction();
      }
  });
}

此处似乎根本不包含关闭点击，所以您可以在模板中的点击事件上调用randomFunction_

(click)="c('Close click'); randomFunction()"

或者您可以在组件中执行此操作，但在第一个回调中，如果单击关闭按钮，它似乎会将字符串 'Close click' 扔给您（或您在模板中定义的任何内容）。那么然后修改open这样：

open(content) {
  this.modalService.open(content).result.then((result) => {
    if(result === 'Close click') {
      this.randomFunction()
    }
  }, (reason) => {
      if (reason === ModalDismissReasons.ESC || 
          reason === ModalDismissReasons.BACKDROP_CLICK) {
          this.randomFunction();
      }
  });
}

【讨论】：