web-dev-qa-db-fra.com

EventEmitter de bootstrap composant modal au parent

J'utilise ng-bootstrap avec Angular 4, le cas d'utilisation spécifique est le modal avec "Component as content" (deuxième scénario de https://ng-bootstrap.github.io/#/composants/modal/exemples ).

Je voudrais émettre des données de l'enfant au parent. Pour cela, j'ai créé un plunk non fonctionnel à partir de l'exemple:

modal.component.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-header">
      <h4 class="modal-title">Hi there!</h4>
    </div>
    <div class="modal-body">
      <p>Hello!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="testclick('teststring')">Testclick</button>
    </div>
  `
})
export class NgbdModalContent {
  @Output() clickevent = new EventEmitter<string>();

  constructor(public activeModal: NgbActiveModal) {}

  testclick(teststring: string) {
    this.clickevent.emit(teststring);
  }
}

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

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
  }
}

modal.component.html

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

Comme vous pouvez le voir, j'ai seulement ajouté l'EventEmitter dans le composant NgbdModalContent. Ce que je voudrais, c'est que le NgbdModalComponent reçoive l'événement testclick et le connecte à la console. Où puis-je le mettre dans le code ci-dessus?

Je suis conscient qu'il y a une question très similaire ici Émetteur d'événement de bootstrap modal au parent mais je pense que c'est toujours un scénario de mise en œuvre très différent puisque j'ouvre le modal directement comme composant ici.

Évidemment, je préférerais des solutions simples où je n'ai pas à entrer dans le code de modalService lui-même ...

angularng-bootstrap
21
Ruehri

Il est en fait très simple car vous pouvez vous abonner directement au @Output événements du composant ouverts en tant que contenu modal:

export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
    modalRef.componentInstance.clickevent.subscribe(($e) => {
      console.log($e);
    })
  }
}

Voici un plongeur de travail: http://plnkr.co/edit/rMJ7qfSSLK0oHspIJbDB?p=preview

Note latérale: je ne sais pas quel est votre cas d'utilisation exact mais la réponse à Emetteur d'événement de bootstrap modal to parent montre la méthode de communication préférée entre l'ouvreur modal et un composant utilisé comme contenu modal.

45
pkozlowski.opensource