Angular 2 ng-bootstrap close Modal

Question

我试图关闭通过open（内容）函数呈现给我的模态，如ng-boostrap的Documentation中的示例所示。在网站上，它提到我可以致电NgbActiveModal关闭或解雇。

所以我在组件中包含了NgbActiveModal并尝试调用dismiss（）或close（）。它们都不起作用。首先，dismiss（）是未定义的（我导入NgbActiveModal错了吗？）当我调用close（）时，似乎想调用lib.dom.d.ts中的一些奇怪的函数，这根本不是我想要的。所以对我来说，即使在我导入NgbActiveModal之后，似乎我无法访问ng-bootstrap提供的关闭和解散。请注意，我可以显示模态罚款

在该示例中，通过（点击）=＆＃34; c（＆＃39;关闭点击＆＃39;）＆＃34;关闭模态。我不知道它来自哪里。

那么......我怎样才能调用close（）或dismiss（）（无论哪个有效）去掉模态

Answer 1

答案可以在这里找到。 ng-bootstrap网站遗憾地遗漏了很多信息Cannot close ng-bootstrap Modal

在组件类

中

  private modalRef: NgbModalRef;

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

  onSave() {
    this.modalRef.close();
  }

Answer 2

1. 在您的模态组件中，您需要添加以下行：

   @ViewChild('exampleModal') public exampleModal:ModalDirective;
   

2. 在html模式中，您需要在div根目录中插入：

   #exampleModal="bs-modal"
   

3. 在您的模态组件中：

   onSave(){
      this.exampleModal.hide();
   }
   

Answer 3

我使用 Angular 6 跟踪了 ng-bootstrap 中的文档。最后，我发现解决方案更改了original example的一行：

modal-options.html

<ng-template #content let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="d('Close click')">Close</button>
  </div>
</ng-template>

我从此 let-modal 更改为此 let-d =“ dismiss” 以及以下两行：

• （click）=“ d（'交叉点击'）”
• （click）=“ d（'关闭点击'）”

modal-options.ts

constructor(private modalService: NgbModal) {}

openLg(content) {
  this.modalService.open(content, { size: 'lg' });
}