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

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

call bootstrap-modal function angular

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 年前

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

推荐文章

AllenBooTung · 如何拖动多模态?

7 年前

Jari Rengeling · 引导模式在PHP中不显示

7 年前

Stiven Choking · 如何在bootstrap 4中降低模式标头的默认高度

7 年前

Veshraj Joshi · 在vuejs中显示另一个模态后,模态将自动隐藏。

7 年前

Droid4o12 · Modals in loop始终仅显示第一幅图像

7 年前

Nikul Panchal · google地图未使用引导模式加载

7 年前

Aakash Kumar · 表达式已更改打开组件内的模式弹出窗口时出错

7 年前

sharath thota · 如何更改glyphicon注释的高度和宽度(引导)

7 年前

Mark Edmondson · 将引导模式按钮映射到Flask WTF submit

7 年前

Rowan Richards DevExpress Team · 如何在ASP中创建模态表单。网络?

7 年前