Question

我有一个模态：

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

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

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

这就像一个魅力。哦，不要忘记将modalReference放在课程的顶部：

modalReference: any;

Answer 2

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

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

您可能要么混淆不同的图书馆，要么可能还有更多问题，但很难根据所提供的信息说出更多信息。

Answer 3

与TBrenner不同，我不能＆＃39;只需使用Class Facade { private ServiceA _serviceA; private ServiceB _serviceB; .... private ServiceE _serviceE; getters () ... }

我跑步：

modalReference: any;

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

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

当然会将其添加到提供商：

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

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

providers[ NgbModal]

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

Answer 4

要打开模式

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

Answer 5

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

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

Answer 6

您在let-d中有let-c或<template #warningModal let-c="close" let-d="dismiss">作为变量，它们都是函数。因此，执行此操作的简单方法是：传递c或d作为类似(click)="submit(c)"或(click)="submit(d)"的参数提交，然后在函数中调用{{1 }}。希望对您有用。

Answer 7

我认为：模态负责关闭自身，而不是模态的调用者。

模式可以通过注入器简单地访问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();
    }

}

Answer 8

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

首先，当我们打开Modal

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

Answer 9

从集中的应用程序组件级别有一种黑客方法可以做到这一点

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

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

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

9 个答案: