Quiero pasar un evento modal del componente modal al componente principal del modal, pero por alguna razón parece que no puedo hacer que EventEmitter funcione. Si alguien tiene una idea, sería muy apreciada. El código principal está debajo, un plunk (que no funciona) bifurcado de la demostración de ng-bootstrap está aquí: http://plnkr.co/edit/xZhsqBV2mQaPxqFkoE7C?p=preview
aplicación.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...'); } }componente-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'; } }Respuesta actualizada:
Finalmente encontré solución a su problema. No estoy seguro si ha estudiado cuidadosamente todos los ejemplos dados para el componente modal en el sitio web ng-bootstrap.
Debe devolver el resultado utilizando el método activeModal.close() del componente de contenido. Ese valor se recogerá en Modal Component y luego podrá hacer lo que quiera con él. Creé un Plunker funcional que es básicamente una bifurcación del plunk oficial y funciona de maravilla.
Respuesta antigua:
Creo que ha puesto el código de manejo de eventos en el lugar equivocado y es por eso que no recibe la notificación del evento.
A continuación se muestra la plantilla de trabajo en app.ts
template: ` <div class="container-fluid"> <template ngbModalContainer></template> <ngbd-modal-component (notifyParent)="getNotification($event)"></ngbd-modal-component> </div> `También se modificó el código de la función Notificar en modal-component.ts para
notify(){ console.log('Notify clicked...'); this.notifyParent.emit('Here is an Emit from the Child...'); this.activeModal.close('Notify click'); }He bifurcado y modificado tu plunk para que funcione aquí .
En angular 7, la respuesta aceptada no funciona. Así que encontré una nueva solución. Es similar pero con un poco de cambio allí.
No se debe cambiar nada en el archivo mecanografiado del componente secundario. Debe hacer un código normal para la función @output y emit . Pero necesita algunos cambios en el archivo de script de tipo principal. El siguiente código me funciona para recopilar eventos y datos.
open() { const modalRef = this.modalService.open(NgbdModalContent); // componentInstace didnot work here for me // modalRef.componentInstance.name = 'World'; modalRef.content.notifyParent.subscribe((result)=>{ console.log(result); }) }Así es como debería ser su app.ts:
@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...'); } }