web-dev-qa-db-fra.com

Emetteur d'événements du modal bootstrap au parent

Je souhaite passer un événement modal du composant modal au composant parent du modal, mais pour une raison quelconque, il semble impossible de faire fonctionner EventEmitter. Si quelqu'un a une idée, ce serait grandement apprécié. Le code principal est ci-dessous, un plunk (non fonctionnel) issu de la démo ng-bootstrap est ici: http://plnkr.co/edit/xZhsqBV2mQaPxqFkoE7C?p=preview

app.ts

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid" (notifyParent)="getNotification($event)">
    <template ngbModalContainer></template>
    <ngbd-modal-component ></ngbd-modal-component>
  </div>
  `
})
export class App {
      getNotification(evt) {
        console.log('Message received...');
    }
}

composant-modal.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';

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

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
      <button type="button" class="btn btn-secondary" (click)="notify()">Notify</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;
  @Output() notifyParent: EventEmitter<any> = new EventEmitter();
  constructor(public activeModal: NgbActiveModal) {}

      notify(){
        console.log('Notify clicked...');
        this.notifyParent.emit('Here is an Emit from the Child...');
    }
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: 'src/modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}
angularng-bootstrap
6
Neph

Réponse mise à jour:

Enfin, j'ai trouvé une solution à votre problème. Je ne suis pas sûr que vous ayez étudié avec soin tous les exemples donnés pour composant modal sur le site Web ng-bootstrap.

Vous devez renvoyer le résultat à l'aide de la méthode activeModal.close () à partir du composant de contenu. Cette valeur sera capturée dans le composant modal et vous pourrez ensuite faire ce que vous voulez en faire. J'ai créé un travail Plunker qui est fondamentalement la fourche du plunk officiel et cela fonctionne comme un charme. 

Ancienne réponse:

Je pense que vous avez mis le code de gestion d'événement au mauvais endroit et c'est pourquoi vous ne recevez pas de notification d'événement.

Ci-dessous, le modèle de travail sur app.ts

  template: `
  <div class="container-fluid">
    <template ngbModalContainer></template>
    <ngbd-modal-component (notifyParent)="getNotification($event)"></ngbd-modal-component>
  </div>
  `

Également modifié le code de la fonction Notify dans modal-composant.ts à 

  notify(){
    console.log('Notify clicked...');
    this.notifyParent.emit('Here is an Emit from the Child...');
    this.activeModal.close('Notify click');
}

J'ai bifurqué et modifié votre plunk pour le faire fonctionner ici

12
Hiren Gondhiya

Dans angular 7, la réponse acceptée ne fonctionne pas. J'ai donc trouvé une nouvelle solution. C'est semblable à mais peu de changement là-bas. 

Rien ne doit être modifié dans le fichier TypeScript du composant enfant. Vous devez utiliser du code régulier pour les fonctions @output et emit. Mais vous avez besoin de modifications dans le fichier script de type parent. Le code ci-dessous fonctionne pour moi afin de collecter des événements et des données.

open() {
  const modalRef = this.modalService.open(NgbdModalContent);
  // componentInstace didnot work here for me
  // modalRef.componentInstance.name = 'World';
  modelRef.content.notifyParent.subscribe((result)=>{
       console.log(result);   
  })
}
2
Veshraj Joshi

Voici comment votre application devrait être:

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid">
      <template ngbModalContainer></template>
      <ngbd-modal-component>
          <ngbd-modal-content [name]="modal Title" (notifyParent)="getNotification($event)"></ngbd-modal-content>
      </ngbd-modal-component>
  </div>
  `
})
export class App {
      getNotification(event) {
        console.log('Message received...');
    }
}

0
Sahil Gupta