首页 文章

如何以编程方式关闭ng-bootstrap模式？

提问于
浏览 次
23

我有一个模态：

<template #warningModal let-c="close" let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Warning</h4>
  </div>
  <div class="modal-body">
      The numbers you have entered result in negative expenses.  We will treat this as $0.00.  Do you want to continue?
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">No</button>
    <button type="button" class="btn btn-secondary" (click)="submit()">Yes</button>
  </div>
</template>

每当我单击是，我希望它调用一个函数并关闭它自己 .
在我的控制器中，我有 @ViewChild('warningModal') warning; ，在 submit() ，我有 this.warning.close(); ，但每当我点击是时，我得到 this.warning.close is not a function .

我如何让它以我想要的方式工作？

angular ng-bootstrap

7 回答

  • 1

    如果您正在使用https://ng-bootstrap.github.io/（如您的问题中所示），事情非常简单 - 您只需打开一个模态并从模板（如代码中）或以编程方式关闭它（通过在 NgbModalRef 类型的返回对象上调用 close() 方法） ） .

    以下是显示此操作的最小示例：http://plnkr.co/edit/r7watmQuyaUQ8onY17Z1?p=preview

    您可能要么混淆不同的库，要么可能还有更多问题，但很难说更多基于所提供的信息 .

    回复于
  • 3

    为了阐述pkozlowski.opensource的响应，我实际获得对NgbModalRef类的引用的方法是修改this.modalService.open中的plunker中的内容，如下所示：

    this.modalReference = this.modalService.open(content);
this.modalReference.result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

    然后我可以打电话给：

    this.modalReference.close();

    这就像一个魅力 . 哦，不要忘记将define modalReference放在类的顶部：

    modalReference: any;
    回复于
  • 58

    与TBrenner不同，我不能't'只使用 modalReference: any;

    我跑：

    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    with angular 5

    我必须在我的app.module.ts中导入

    import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

    当然将其添加到提供者：

    providers[ NgbModal]

    一旦完成这里是模态组件的代码：

    import { Component, Input } from '@angular/core'; 
 import { ModalDismissReasons, NgbModal, NgbModalRef } from '@ng 
 bootstrap/ng-bootstrap';

export class MyClass {
modalReference: NgbModalRef;

constructor(private modalService: NgbModal)
open(content) {
this.modalReference = this.modalService.open(content);
this.modalReference.result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}

private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
  return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
  return 'by clicking on a backdrop';
} else {
  return `with: ${reason}`;
}
}

JoinAndClose() {
this.modalReference.close();
}

    https://ng-bootstrap.github.io应该添加一些关于引用重要性的信息..我有点挣扎了解我需要创建一个访问".close()"方法的引用 . 谢谢大家，它帮助了很多！

    回复于
  • 16

    打开模态

    import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

modalReference = null;     

constructor(private modalService: NgbModal) {

   }

openVerticallyCentered(content) {
    this.modalReference = this.modalService.open(content, { centered: true });
  }

    像阿米特说的那样，使用参考来关闭模态

    this.modalReference.close();

    来源：https://ng-bootstrap.github.io/#/components/modal/examples

    回复于
  • 1

    你用 @ViewChild('warningModal') warning 做的是得到你在模态中使用的TemplateRef，而不是实际的 NgbModalRef .

    这取决于你如何打开你的模态，如果你以编程方式打开它，你应该收到 NgbModalRef 对象，你可以调用 .close .

    回复于
  • 9

    您在 <template #warningModal let-c="close" let-d="dismiss"> 中有 let-d 或 let-c 作为变量，两者都是函数 . 所以，这样做的简单方法是：将 c 或 d 传入提交作为参数，如 (click)="submit(c)" 或 (click)="submit(d)" ，然后在函数中调用 submit(c){ c('close modal'); } . 希望对你有用 .

    回复于
  • 0

    您可以通过以下方式关闭模态 .

    首先，当我们打开模态

    this.modalService.open(content, { size: "lg" }).result.then(
      result => {
        this.closeResult = `Closed with: ${result}`;
      },
      reason => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      }

    之后在TS中关闭使用此

    this.modalService.dismissAll();
    回复于

相关问题