2017-10-11 67 views
2

我試圖做一個函數(讓我們說「randomFunction」)上點擊使用NgbModalangular2中使用的模式的背景下(圖中陰影部分)調用。。 anuglar 2模式

這裏是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"); 
    } 
} 

可有人請建議我如何在此繼續或如何在調用此randomFunction()模態的功能dismiss()close()

回答

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

似乎緊密點擊完全不包括在這裏,所以無論是你在TEMPLATE_

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

上的click事件調用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(); 
     } 
    }); 
}