我有一个Angular 2项目,我动态生成子组件,我想听一个由该组件调度的自定义事件。
这是我的父组件,它生成组件并侦听事件
var cmpRef: ComponentRef<any>;
let factory = this.componentFactoryResolver.resolveComponentFactory(type);
cmpRef = this.target.createComponent(factory);
// PROPERLY DETECTS EVENT
cmpRef.instance.self.nativeElement.addEventListener('click',this.onEventFired);
// DOESN'T DETECT EVENT
cmpRef.instance.self.nativeElement.addEventListener('isLoaded',this.onEventFired);
// call this method to fire the event
(cmpRef.instance as ChildComponent).load();
这是我的ChildComponent
import { Component, OnInit,ChangeDetectorRef, Output,EventEmitter,ElementRef } from '@angular/core';
@Component({
selector: 'app-child',
template: ' <p>child component- click on text to fire event!</p>'
})
export class ChildComponent implements OnInit, AfterViewInit {
@Output('isLoaded') isLoaded:EventEmitter<boolean> = new EventEmitter<boolean>();
constructor(public self:ElementRef)
{
console.log('ChildComponent Created')
}
public load()
{
console.log('load method called.... dispatching event')
this.isLoaded.next(true);
}
}
我需要能够收听正在发送的事件但是出于我的目的,我不能使用该模板并希望直接从我的打字稿中听。我已成功完成了“点击”事件,但我的自定义事件已发送但从未被检测到。
我附上了一个用来展示我的用例的傻瓜
答案 0 :(得分:3)
如果你想订阅你的isLoaded
事件只是投射工厂创建的组件并订阅isLoaded
事件,那么它不应该如何工作。
只需改变你的:
// DOESN'T DETECT EVENT
cmpRef.instance.self.nativeElement.addEventListener('isLoaded',this.onEventFired);
有关:
// DOESN'T DETECT EVENT
(<ChildComponent>cmpRef.instance).isLoaded.subscribe(() => {
console.log("Has been loaded");
});
第一个案例有效,因为这是主持人的本机事件。