NgbModalの背景をクリックして関数呼び出し。 anuglar 2 modal

Question

私は、NgbModalを使用してangular2で使用されているモーダルの背景（影付き部分）をクリックして、関数（「randomFunction」）を呼び出しようとしています。ここで

はcompanyNumberComponent.htmlです：

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

誰かがこれで進行する方法またはこのrandomFunction()を呼び出す方法を私に提案してくださいすることができ：ここ

<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ファイルですdismiss()またはclose()モーダルの機能。

Answer 1

彼らはすなわちModalDismissReasons、あなたが探していることだろうか、docsに持っているようだ：

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

[閉じる]をクリックしますが、すべてでここに含まれているように見えるので、あなたのいずれかはありませんtemplate_

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

にクリックイベントにrandomFunctionを呼び出すことができます。また、コンポーネントでそれを行うことができますが、最初のcallbでack。ここで閉じるボタンをクリックすると、文字列'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(); 
     } 
    }); 
}