从引导程序模态到父级的事件发射器 [英] Event emitter from bootstrap modal to parent

问题描述

我想将模态事件从模态组件传递到模态的父组件，但是由于某些原因，我似乎无法使EventEmitter正常工作.如果有人有想法，将不胜感激.下面是主要代码，是ng-bootstrap演示中的一个(无效的)插件: http://plnkr.co/edit/xZhsqBV2mQaPxqFkoE7C?p=preview

I want to pass a modal event from the modal component to the modal's parent component, but for some reason I can't seem to get the EventEmitter to work. If anyone has an idea it would be greatly appreciated. The main code is below, a (non-working) plunk forked from the ng-bootstrap demo is here: 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...');
    }
}

modal-component.ts

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-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';
  }
}

推荐答案

更新后的答案:

最后，我找到了解决您问题的方法.我不确定您是否仔细研究了在模态组件上给出的所有示例ng-bootstrap网站.

Finally I found solution to your issue. I am not sure if you have carefully studied all the examples given for modal component on ng-bootstrap web site.

您需要使用contentModule中的activeModal.close()方法返回结果.该值将在模态组件"中拾取，然后您可以执行任何您想使用的值.我创建了一个工作柱塞，它基本上是官方插头的分支，并且就像魅力一样.

You need to return result using activeModal.close() method from the content component. That value will be picked up in Modal Component and then you can do whatever you want to do with it. I have created a working Plunker which is basically fork of the official plunk and it works like charm.

旧答案:

我认为您将事件处理代码放在错误的位置，这就是为什么您没有事件通知的原因.

I think you have put event handling code at wrong place and that's why you don't get event notification.

以下是app.ts上的工作模板

Below is the working template on app.ts

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

还将modal-component.ts中的Notify函数的代码修改为

Also modified code of Notify function in modal-component.ts to

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

我已经分叉并修改了您的插件，使其可以正常使用此处

I have forked and modified your plunk to make it working here

这篇关于从引导程序模态到父级的事件发射器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！