我想将模态事件从模态组件传递给模态的父组件,但由于某种原因,我似乎无法使EventEmitter工作。如果有人有想法,将不胜感激。主要代码如下,从ng-bootstrap演示分叉的(非工作)插件在这里: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...');
}
}
模态-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';
}
}
答案 0 :(得分:12)
更新回答:
最后,我找到了解决您问题的方法。我不确定您是否仔细研究过ng-bootstrap网站上modal component的所有示例。
您需要使用内容组件中的activeModal.close()方法返回结果。该值将在Modal Component中获取,然后您可以执行任何操作。我已经创建了一个working Plunker,它基本上是官方插件的叉子,它的功能就像魅力一样。
旧回答:
我认为您已将事件处理代码放在错误的位置,这就是您没有收到事件通知的原因。
以下是app.ts上的工作模板
template: `
<div class="container-fluid">
<template ngbModalContainer></template>
<ngbd-modal-component (notifyParent)="getNotification($event)"></ngbd-modal-component>
</div>
`
还修改了modal-component.ts中的Notify函数代码
notify(){
console.log('Notify clicked...');
this.notifyParent.emit('Here is an Emit from the Child...');
this.activeModal.close('Notify click');
}
我已经分叉并修改了你的插件以使其正常工作here
答案 1 :(得分:3)
在角度7中,可接受的答案不起作用..所以我找到了新的解决方案。类似于,但那里有些变化。
子组件的打字稿文件中的任何内容均不应更改。您需要为@output
和emit
函数编写常规代码。但是您需要在父类型脚本文件中进行一些更改。下面的代码为我工作,以收集事件和数据..
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 :(得分:0)
这就是你的app.ts应该是这样的:
form['first_of_month']
&#13;
答案 3 :(得分:-1)
我使用的是Angular 7,我如何处理父级中子级事件的方法就像@Veshraj Joshi所做的那样。如下:
`modalRef.componentInstance.notifyParent.subscribe(result => {
console.log(result);
});`