首页 文章

Angular 2 ng-bootstrap close Modal

提问于
浏览 次
10

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

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

在该示例中，通过（click）=“c（'Close click'）”关闭模态 . 我不知道它来自哪里 .

所以...我如何调用close（）或dismiss（）（无论哪个有效）来摆脱模态

modal dismiss

angular ng-bootstrap

3 回答

  • 21

    答案可以在这里找到 . 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();
  }
    回复于
  • 0
    • 在模态组件中，您需要添加以下行：
    @ViewChild('exampleModal') public exampleModal:ModalDirective;
    • 在html模式中，您需要在div根目录中插入：
    #exampleModal="bs-modal"
    • 在您的模态组件中：
    onSave(){
   this.exampleModal.hide();
}
    回复于
  • 4

    我跟着 ng-bootstrap 的文档跟 Angular 6 . 最后我发现解决方案从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" 以及此2行：

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

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

    modal-options.ts

    constructor(private modalService: NgbModal) {}

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

相关问题