代码之家  ›  专栏  ›  技术社区  ›  Abhishek Parashar

单击NgbModal Background时的函数调用。anuglar 2模式

  •  5
  • Abhishek Parashar  · 技术社区  · 7 年前

    我试图通过单击中使用的模式的背景(阴影部分)来调用函数(比如“randomFunction”) angular2 使用 NgbModal .

    这是 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 回复  |  直到 7 年前
        1
  •  9
  •   AT82    7 年前

    似乎他们在 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();
          }
      });
    }