Javascript 如何将事件从动态加载的模式发送到父级
我有一个从组件动态创建的模式,如下所示:Javascript 如何将事件从动态加载的模式发送到父级,javascript,angular,eventemitter,Javascript,Angular,Eventemitter,我有一个从组件动态创建的模式,如下所示: @Injectable() export class SharedService { showModal:Subject<any> = new Subject(); } @Component({ selector: 'comp-comp', template: `MyComponent dataToPass: {{dataToPass}}, dataToPass2: {{dataToPass2}} &l
@Injectable()
export class SharedService {
showModal:Subject<any> = new Subject();
}
@Component({
selector: 'comp-comp',
template: `MyComponent dataToPass: {{dataToPass}}, dataToPass2: {{dataToPass2}}
<button (click)="updateData()">Update data</button>`
})
export class CompComponent {
@Output() setupDataUpdated = new EventEmitter();
private dataToPass2;
constructor() {}
ngAfterContentInit() {
this.dataToPass2 = this.dataToPass + ' hello';
}
updateData() {
console.log('data updated');
this.setupDataUpdated.emit('emitted_value');
}
}
@Component({
selector: 'modal-comp',
template: `
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel">
<div class="modal-dialog largeWidth" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{theHeader}}</h4></div>
<div class="modal-body" #theBody (setupDataUpdated)="updateSetupData($event)">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (close)="close()">Close</button>
</div></div></div></div>
`
})
export class ModalComponent {
@ViewChild('theBody', {read: ViewContainerRef}) theBody;
theHeader: string = '';
dataToPass: string = '';
cmpRefBody:ComponentRef<any>;
constructor(
sharedService:SharedService,
private componentFactoryResolver: ComponentFactoryResolver,
injector: Injector) {
sharedService.showModal.subscribe(data => {
if(this.cmpRef) {
this.cmpRef.destroy();
}
let factory = this.componentFactoryResolver.resolveComponentFactory(data.type);
this.cmpRef = this.theBody.createComponent(factory);
this.cmpRef.instance.dataToPass = data.dataToPass;
this.dataToPass = data.dataToPass;
this.theHeader = data.title;
console.log(data.title);
console.log(data.dataToPass);
$('#theModal').modal('show');
});
}
close() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.cmpRef = null;
}
updateSetupData(data) {
console.log('update data');
console.log(data);
}
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello</h2>
<button (click)="showDialog()">show modal</button>
<child-component></child-component>
</div>
`,
})
export class App {
constructor(private sharedService:SharedService) {}
showDialog() {
this.sharedService.showModal.next({'type': CompComponent, 'title': 'titolo1', 'dataToPass': 'dataToPass'});
}
}
@Injectable()
导出类共享服务{
showModal:主题)
如您所见,我试图从模式子组件发出一个事件setupDataUpdated
,但模式父组件似乎看不到该事件。
你知道为什么吗?我的错误在哪里?你需要手动订阅你的EventEmitter
,如下所示:
this.cmpRef.instance.setupDataUpdated.subscribe((data) => this.updateSetupData(data));
请接受答案或留下评论,以便解决此问题。这似乎是正确的方法,但我认为它是反向实现的。您已将订阅服务器添加到模式组件中。它现在应该位于调用模式的组件中?此外,Plunker已损坏。@isherwood修复了Plunker