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

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);