将事件绑定添加到动态创建的组件

时间:2016-10-14 15:30:45

标签: javascript angular

我使用app.component.ts方法在ViewContainerRef.createComponent()内动态创建组件,该方法返回ComponentRef个对象。

let newComponent:ComponentRef<any> = this.filtersSection.createComponent(MyDateRangeComponent);

我需要动态地向该组件添加一个事件监听器,以便它监听onDateRangeChange事件并执行dateRangeChanged(event)组件中定义的app.component.ts方法。

我最初在app.component.html中使用了这个组件:

<my-daterange (onDateRangeChange)="dateRangeChanged($event)"></my-daterange>

我发现这可以使用Renderer类来实现,但我无法使其正常工作:

this.renderer.listen(newComponent, 'click', (event) => {
    // Do something with 'event'
    console.log(event);
});

对此的任何帮助都将非常感激。

1 个答案:

答案 0 :(得分:9)

使用ComponentRef.instance可以访问组件实例,您可以订阅EventEmitter

newComponent.instance.onDataRateChange.subscribe(evt => this.result = evt);