Angular 2 ng-bootstrap close Modal

问题

I am trying to close the modal that was presented to me through the open(content) function as shown in the example in the Documentation of ng-boostrap. In the website, it mentioned that i can call close or dismiss from NgbActiveModal.

So I included NgbActiveModal in the component and tried to call dismiss() or close(). Both of them doesn't work. First of all, dismiss() is undefined (Am I importing NgbActiveModal wrong?) When I call close(), it seems to want to call some weird function inside lib.dom.d.ts which is not what I want at all. So to me it seems like I have no access to the close and dismiss provided by ng-bootstrap even after I imported NgbActiveModal. Note that I can show the modal fine

In the example, the modal was closed via (click)="c('Close click')". I have no idea where that comes from.

So... How can I call the close() or dismiss() (Whichever works) to get rid of the modal

回答1:

Answer can be found here. ng-bootstrap website is missing lots of information unfortunately Cannot close ng-bootstrap Modal

Inside the component 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();
  }

回答2:

At your modal component you need to add the line :

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

At html modal you need to insert in the div root :
```
#exampleModal="bs-modal"
```

At your modal component :

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

回答3:

I followed the doc from ng-bootstrap with Angular 6. Finally I found the solution changing one line from the 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>

I changed from this let-modal to this let-d="dismiss" and also this 2 lines:

(click)="d('Cross click')"
(click)="d('Close click')"

modal-options.ts

constructor(private modalService: NgbModal) {}

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

来源：https://stackoverflow.com/questions/41937699/angular-2-ng-bootstrap-close-modal

标签

angular

ng-bootstrap