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

Question

我正在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);
});

任何有关这方面的帮助将非常感激.

Answer 1

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

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