動的に作成されたコンポーネントへのイベントバインディングの追加

Question

ViewContainerRef.createComponent()メソッドを使用してapp.component.tsメソッド内で動的にコンポーネントを作成しています。これはComponentRefオブジェクトを返します。

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

それはonDateRangeChangeイベントをリスンし、app.component.tsコンポーネント内で定義dateRangeChanged(event)方法を実行するように動的にこのコンポーネントにイベントリスナーを追加する必要があります。

私はもともとこのよう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を使用して

Answer 1

あなたはコンポーネントのインスタンスにアクセスすることを可能にし、これであなたはEventEmitterを購読することができます。

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