Angular 2 of-bootstrap 关闭模态

Question

我正在尝试关闭通过 open(content) 函数呈现给我的模态，如 ng-boostrap Documentation 中的示例所示。在网站上，它提到我可以从 NgbActiveModal 调用 close 或 dismiss。

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

在示例中，模态窗口通过（单击）="c('Close click')" 关闭。我不知道那是从哪里来的。

所以...我怎样才能调用 close() 或 dismiss()（无论哪个有效）来摆脱模态

Answer 1

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

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

在 html 模态你需要插入 div 根：
```
#exampleModal="bs-modal"
```

在您的模态组件中：

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

Answer 2

可以在这里找到答案。 ng-bootstrap 不幸的是网站缺少很多信息

组件内部class

  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 3

我按照 ng-bootstrap 和 Angular 6 的文档。最后我找到了从 original example:

改变一行的解决方案

模态-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" 以及这两行：

（点击）="d('Cross click')"
（点击）="d('Close click')"

模态-options.ts

constructor(private modalService: NgbModal) {}

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

Angular 2 of-bootstrap 关闭模态

Angular 2 ng-bootstrap close Modal

ng-bootstrap

angular