我试图从component.ts文件中关闭html boostrap模式

Question

I have been trying to close a bootstrap modal from a component.ts file after successful submission of the form.

I tried to follow the instructions here:

https://ng-bootstrap.github.io/#/components/modal/api which has a stackblitz https://stackblitz.com/run?file=index.html

While the stackblitz has got the open function defined :

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)}`;
    });
  }

While all i want to do is, as shown in the html file

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

More precisely just this:

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

However, I already have a click-function on the button, which means the same function should be able to call the function to close the modal on successful form submission.

I think the part that I am stuck with is this: "A reference to an active (currently opened) modal. Instances of this class can be injected into components passed as modal content."

Answer 1

You need to inject the NgbActiveModal object into the component used as the popup dialog, and then call the close method on that reference.

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

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

See this doc reference:

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

Answer 2

I would recommend you to use NgbActiveModal class. Feel free to check out the API here .

On your component.ts, you will need to import the NgbActiveModal class.

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

constructor(activeModal: NgbActiveModal) {}

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

And on your component.html, you may bind the close() method with your click event on your close button.

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

The NgBootstrap site has a decent demo using the NgbActiveModal . I have forked a demo for you reference.