web-dev-qa-db-fra.com

Angular 2 ng-bootstrap close Modal

J'essaie de fermer le modal qui m'a été présenté via la fonction open (contenu), comme indiqué dans l'exemple de la Documentation de ng-boostrap. Sur le site Web, il est mentionné que je peux appeler de près ou renvoyer de NgbActiveModal. 

J'ai donc inclus NgbActiveModal dans le composant et essayé d'appeler licencier () ou fermer (). Les deux ne fonctionnent pas. Tout d’abord, licencier () n’est pas défini (j'importe mal NgbActiveModal?) Lorsque j'appelle close (), il semble vouloir appeler une fonction étrange dans lib.dom.d.ts, ce qui n'est pas du tout ce que je veux. Donc, pour moi, il semble que je n’ai pas accès à la fermeture et au renvoi fournis par ng-bootstrap même après avoir importé NgbActiveModal. Notez que je peux montrer l'amende modale

Dans l'exemple, le modal a été fermé via (click) = "c ('Fermer le clic')". Je ne sais pas d'où ça vient. 

Alors ... Comment puis-je appeler le close () ou rejeter () (selon ce qui fonctionne) pour se débarrasser du modal

modal dismiss

angularng-bootstrap
11
user172902

La réponse peut être trouvée ici. Malheureusement, il manque beaucoup d'informations sur le site Web ng-bootstrap Impossible de fermer Modal ng-bootstrap

Dans la classe de composant

  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();
  }
26
user172902

  1. Sur votre composant modal, vous devez ajouter la ligne:

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

  2. Au format HTML, vous devez insérer dans la racine div:

    #exampleModal="bs-modal"

  3. A votre composante modale:

    onSave(){
   this.exampleModal.hide();
}
4
Yoav Schniederman

J'ai suivi la doc de ng-bootstrap avec Angular 6. Enfin, j'ai trouvé la solution en changeant une ligne de l'exemple original :

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>

J'ai changé de let-modal à ceci let-d = "licencier" et aussi ces 2 lignes:

  • (clic) = "d ('clic en croix')"
  • (click) = "d ('clic de fermeture')"

modal-options.ts

constructor(private modalService: NgbModal) {}

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