如何以编程方式关闭ng-bootstrap模态? [英] How to programmatically close ng-bootstrap modal?

问题描述

我有一个模态:

<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.

Whenever I click yes, I want it to call a function and close itself.
In my controller, I have @ViewChild('warningModal') warning; and in submit(), I have this.warning.close();, but I get this.warning.close is not a function whenever I click Yes.

如何使它按我想要的方式工作?

How do I get this to work the way I want it to?

推荐答案

如果您使用的是 https://ng -bootstrap.github.io/(如您的问题所示)，事情非常简单-您可以打开一个模式，然后从模板(如您的代码)中将其关闭或 (以编程方式(通过对返回的NgbModalRef类型的Object调用close()方法).

If you are using https://ng-bootstrap.github.io/ (as indicated in your question) things are extremely simple - you can just open a modal and either close it from a template (as in your code) or programmatically (by calling close() method on the returned Object of type NgbModalRef).

以下是一个显示此操作的最小示例: http://plnkr.co/edit/r7watmQuyaUQ8onY17Z1?p =预览

Here is a minimal example showing this in action: http://plnkr.co/edit/r7watmQuyaUQ8onY17Z1?p=preview

您可能会混淆不同的库，或者可能还有其他疑问，但仅根据所提供的信息很难说更多.

You might be either confusing different libraries or maybe there is sth more to your question but it is hard to say more based just on the info provided.

这篇关于如何以编程方式关闭ng-bootstrap模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！