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

【问题标题】：How to programmatically close ng-bootstrap modal?如何以编程方式关闭 ng-bootstrap 模式？
【发布时间】：2016-11-02 14:22:27
【问题描述】：

我有一个模态：

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

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

【问题讨论】：

是 ng-bootstrap 还是 ng2-bootstrap？

标签： angular ng-bootstrap

【解决方案1】：

为了解释 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;

【讨论】：

很棒的答案！不要忘记导入 NgbModalRef！
如果你像他一样定义modalReference，你实际上不需要导入它
您可以选择将参数传递给关闭，例如this.modalReference.close("submitted");
我直接找到了这个答案，可以最快地解决我的解决方案。
在解决这个问题一个小时后，我发现了这个..谢谢它有很大帮助

【解决方案2】：

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

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

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

【讨论】：

谢谢！这正是我解决它的方法。我只是忘了回来编辑。顺便说一句，你的项目很棒。
plunker 不起作用，但您的解决方案对我有用，

【解决方案3】：

与 TBrenner 不同，我不能只使用 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()”方法。谢谢大家，帮了大忙！

【讨论】：

【解决方案4】：

您可以通过以下方式简单地关闭模式。

首先我们打开模态

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

在 TS 之后用于关闭使用 this

 this.modalService.dismissAll();

【讨论】：

this.modalService.dismissAll();这个案子对我有用！谢谢朋友
如果您确实想关闭所有打开的模态框，但如果您想保持一个打开状态则不行。
谢谢！这终于为我做到了。

【解决方案5】：

打开模态

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

modalReference = null;     

constructor(private modalService: NgbModal) {

   }

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

使用引用关闭模式，就像 Amit 说的那样

this.modalReference.close();

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

【讨论】：

除此之外，模型引用可以设置为类型：NgbModalRef。

【解决方案6】：

<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'); }。希望这对你有用。

【讨论】：

【解决方案7】：

您对@ViewChild('warningModal') warning 所做的就是获取您在模态中使用的TemplateRef，而不是实际的NgbModalRef。

这取决于您打开模式的方式，如果您以编程方式打开它，您应该会收到 NgbModalRef 对象，您可以在该对象上调用 .close。

【讨论】：

【解决方案8】：

在我看来：模态框负责关闭自己，而不是模态框的调用者。

模态框可以通过注入器简单地访问NgbActiveModal 类，并通过调用close 或dismiss 函数来关闭自己。

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

export class Modal {

    constructor(private activeModal: NgbActiveModal) {
    }

    public submit() {
        this.activeModal.close(/* your result */);
    }

    public close() {
        this.activeModal.close();
    }

}

【讨论】：

【解决方案9】：

有一种从集中式应用组件级别执行此操作的 hacky 方法

this._platformLocation.onPopState(() => {
        document.getElementsByClassName('modal-header')[0].getElementsByTagName('a')[0].click();
    });

this 应该放在 app.component.ts 文件中的构造函数中。

【讨论】：