web-dev-qa-db-fra.com

Comment fermer par programmation ng-bootstrap modal?

J'ai un modal:

<template #warningModal let-c="close" let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Warning</h4>
  </div>
  <div class="modal-body">
      The numbers you have entered result in negative expenses.  We will treat this as $0.00.  Do you want to continue?
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">No</button>
    <button type="button" class="btn btn-secondary" (click)="submit()">Yes</button>
  </div>
</template>

Chaque fois que je clique sur Oui, je veux qu'il appelle une fonction et se ferme.
Dans mon contrôleur, j'ai @ViewChild('warningModal') warning; et dans submit(), j'ai this.warning.close();, mais je reçois this.warning.close is not a function chaque fois que je clique sur Oui. 

Comment puis-je obtenir que cela fonctionne comme je le veux?

angularng-bootstrap
18
Alex Kibler

Si vous utilisez https://ng-bootstrap.github.io/ (comme indiqué dans votre question), les choses sont extrêmement simples: vous pouvez ouvrir un modal et le fermer à partir d'un modèle (comme dans votre code). ) ou par programme (en appelant la méthode close() sur l'objet renvoyé de type NgbModalRef).

Voici un exemple minimal montrant cela en action: http://plnkr.co/edit/r7watmQuyaUQ8onY17Z1?p=preview

Vous pouvez soit confondre différentes bibliothèques, soit peut-être y a-t-il autre chose à votre question, mais il est difficile d'en dire davantage en se basant uniquement sur les informations fournies.

15
pkozlowski.opensource

Pour expliquer la réponse de pkozlowski.opensource, la façon dont j'ai obtenu la référence à la classe NgbModalRef consistait à modifier ce qui se trouve dans son plunker sur this.modalService.open comme suit:

this.modalReference = this.modalService.open(content);
this.modalReference.result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

Ensuite, j'ai pu appeler:

this.modalReference.close();

Ce qui a fonctionné comme un charme. Oh, et n'oubliez pas de mettre definir modalReference en haut de la classe:

modalReference: any;
57
TBrenner

Contrairement à TBrenner, je ne pouvais pas simplement utiliser modalReference: any;

Je cours avec:

    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    with angular 5

Je devais importer dans mes app.module.ts

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

et bien sûr l'ajouter aux fournisseurs: 

providers[ NgbModal]

une fois que c'est fait, voici le code du composant modal:

 import { Component, Input } from '@angular/core'; 
 import { ModalDismissReasons, NgbModal, NgbModalRef } from '@ng 
 bootstrap/ng-bootstrap';

export class MyClass {
modalReference: NgbModalRef;

constructor(private modalService: NgbModal)
open(content) {
this.modalReference = this.modalService.open(content);
this.modalReference.result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}

private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
  return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
  return 'by clicking on a backdrop';
} else {
  return `with: ${reason}`;
}
}

JoinAndClose() {
this.modalReference.close();
}

https://ng-bootstrap.github.io devrait ajouter quelques informations sur l’importance de la référence .. J'ai eu du mal à comprendre que je devais créer une référence pour accéder à la méthode ".close ()". Merci à vous tous, cela a beaucoup aidé!

9
Christophe Gudlake

Pour ouvrir le modal

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

modalReference = null;     

constructor(private modalService: NgbModal) {

   }

openVerticallyCentered(content) {
    this.modalReference = this.modalService.open(content, { centered: true });
  }

pour fermer le modal en utilisant la référence, comme dit Amit

this.modalReference.close();

source: https://ng-bootstrap.github.io/#/components/modal/examples

3
Eric

Vous avez let-d ou let-c dans <template #warningModal let-c="close" let-d="dismiss"> en tant que variables, les deux sont des fonctions. Ainsi, le moyen le plus simple de le faire est de passer c ou d à submit en tant qu’argument comme ceci (click)="submit(c)" ou (click)="submit(d)", puis dans la fonction, appelez simplement submit(c){ c('close modal'); }. J'espère que cela fonctionne pour vous. 

1
Edwin Anciani

Ce que vous avez fait avec @ViewChild('warningModal') warning est d'obtenir la TemplateRef que vous avez utilisée comme dans votre modal, pas la NgbModalRef réelle.

Cela dépend de la manière dont vous ouvrez votre modal. Si vous l'ouvrez par programme, vous devriez recevoir l'objet NgbModalRef que vous pourriez appeler .close on.

1
Amit