Question

成功提交表单后，我一直在尝试从component.ts文件中关闭引导程序模式。

我尝试按照此处的说明进行操作：

https://ng-bootstrap.github.io/#/components/modal/api，有堆叠闪电 https://stackblitz.com/run?file=index.html

虽然stackblitz定义了open函数：

open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

我想要做的只是如html文件所示

<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>

更准确地说就是：

(click)="modal.close('Save click')"

但是，我在按钮上已经具有单击功能，这意味着该功能应该能够在成功提交表单后调用该功能以关闭模式。

我认为我坚持的部分是：“对活动（当前打开的）模态的引用。此类的实例可以注入作为模态内容传递的组件中。”

Answer 1

您需要将NgbActiveModal对象注入到用作弹出对话框的组件中，然后在该引用上调用close方法。

@Component({..})
export class MyDialogComponent {
    public constructor(private _modal: NgbActiveModal) { }

    public close() {
        this._modal.close("result");
    }
}

请参阅此文档参考：

https://ng-bootstrap.github.io/#/components/modal/api#NgbActiveModal

Answer 2

我建议您使用NgbActiveModal类。随时检查API here。

在component.ts上，您需要导入NgbActiveModal类。

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

constructor(activeModal: NgbActiveModal) {}

close() {
  this.activeModal.close();
  // or this.activeModal.dismiss() depending on your requirements
}

然后在component.html上，可以将close()方法与关闭按钮上的click事件绑定。

<button type="button" class="close" aria-label="Close" (click)="close()">
  <span aria-hidden="true">&times;</span>
</button>

NgBootstrap网站使用NgbActiveModal进行了不错的演示。我派出了demo供您参考。

我正在尝试从component.ts文件关闭html boostrap modal

2 个答案: