web-dev-qa-db-fra.com

Angular 2 NgbModal NgbActiveModal close modal

J'utilise Angular 2, je travaille avec un formulaire modal. J'ai deux composants. À partir d'un composant, j'ouvre le formulaire modal de la manière suivante: 

import { Component, OnInit, Output} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MyFormComponent } from '......./....';


@Component({
    moduleId: module.id,
    selector: 'my-component',
    templateUrl: 'my-component.html'
})
export class MyComponent implements OnInit {

    private anyData: any;
    private anyDataForm: any;


    constructor(
        private modalService: NgbModal
    ) { }

    ngOnInit(): void {
    }

    open() {
        const modalRef = this.modalService.open(MyFormComponent, { size: 'lg' });
        modalRef.componentInstance.anyDataForm = this.anyData;
    }

    possibleOnCloseEvet() { 
        //Do some actions....
    }

}

La méthode open () se déclenche à partir d'un bouton de my-composant.html  

Et sur le composant Form (le modal), je l’utilise pour fermer le modal actuel (de lui-même)

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    moduleId: module.id,
    selector: 'my-form-component',
    templateUrl: 'my-form-component.html'
})
export class MyFormComponent implements OnInit, OnDestroy {

    @Input() anyDataForm: any;

    constructor(
        public activeModal: NgbActiveModal
    ) {
    }

    ngOnInit(): void {
    }

    //Some form code...

    OnSubmit() {
        this.activeModal.close(); //It closes successfully
    }

    ngOnDestroy(): void {
    }

}

Ce que je dois faire est de déclencher une sorte d'événement "à la fermeture" sur le composant appelant pour effectuer certaines actions sur l'appelant uniquement lorsque le modal est fermé. (ne peut pas utiliser l'événement emmiter) 

Existe-t-il un moyen pour l'ouvre-composant de savoir quand le modal se ferme? Je n'ai trouvé aucun exemple clair de cela. 

angularng-bootstrap
6
Dany G

Essaye ça:

const modalRef = this.modalService.open(MyFormComponent, { size: 'lg' });
modalRef.componentInstance.anyDataForm = this.anyData;

modalRef.result.then((data) => {
  // on close
}, (reason) => {
  // on dismiss
});
15
Adnan A.

dans MyFormComponent, vous pouvez ajouter closeModal () {this.activeModal.close (n'importe quoi); }

0
octavian09

Sur mon Composant Modalform

 this.activeModal.close('success');

Puis sur mon composant parent ListComponent

 this.modalRef = this.modalService.open(ModalformComponent);
 this.modalRef.componentInstance.title = 'Add Record';
 this.modalRef.result.then((result) => {
  if ( result === 'success' ) {
     this.refreshData(); // Refresh Data in table grid
  }
}, (reason) => {
});
0
David Njuguna