。 anuglar 2模式

Question

我试图做一个函数（让我们说“randomFunction”）上点击使用NgbModalangular2中使用的模式的背景下（图中阴影部分）调用。

这里是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()。

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