Блог

Я динамически создаю компоненты внутри 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);
});
 

Любая помощь в этом была бы очень признательна.

Использование ComponentRef.instance позволяет вам получить доступ к экземпляру компонента, и с его помощью вы можете подписаться на EventEmitter :

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