angular2 typescript動的にロードされたコンポーネントの親メソッド呼び出し

Question

動的にロードされるコンポーネントから親メソッドを呼び出そうとしています。私は角度の料理本の動的コンポーネントローダーソリューションを使用していますhttps://angular.io/guide/dynamic-component-loader

私が達成しようとするのは、ロードされたコンポーネントから親のdeleteBannerメソッドを呼び出すことです。

ロードされたコンポーネント（HeroJobAdComponentおよびHeroProfileComponent）にeventEmitterを追加し、AdBannerComponentのイベント（deleteBanner）をキャッチし、AdBannerComponentのdeleteBanneronParentのローカルメソッドを呼び出そうとしました。

持つEventEmitterがロードされたコンポーネントで：

export class HeroProfileComponent implements AdComponent { 
    @Input() data: any; 
    @Output() deleteBanner: EventEmitter<string> = new 
    EventEmitter<string>(); 

    removeBanner() { 
    console.log('removeBanner on HeroProfileComponent invoked'); 
    this.deleteBanner.emit(null); 
    } 
} 

と親にイベントをキャッチ：

<div ad-host (deleteBanner)="deleteBanneronParent()"></div> 

ロードコンポーネント上のローカルメソッドが呼び出されますが、何らかの理由でそのはに伝播しません親コンポーネント私がここで何を欠いているのか？

https://plnkr.co/edit/NzdkaLSEiAmlNnRyN5BW

Answer 1

あなたの動的コンポーネントをホストするためのディレクティブを使用しているので、イベントの伝播は、ディレクティブで失われ、親はどんなイベントを取得することはありません。

ディレクティブにコンテンツを挿入するために使用しているloadComponent（）メソッドは、すでにComponentRefを受け取り、コンテンツをロードします。このComponentRefを使用すると、イベントに登録することもできます。

はAdComponentインターフェイスのインターフェイス拡張：

import { EventEmitter } from '@angular/core'; 

export interface AdComponent { 
    data: any; 
    deleteBanner: EventEmitter<string>; 
} 

をそしてあなたのコンポーネントからイベントをサブスクライブ：洞察力の@hagnerため

loadComponent() { 
    this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length; 
    let adItem = this.ads[this.currentAddIndex]; 

    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component); 

    let viewContainerRef = this.adHost.viewContainerRef; 
    viewContainerRef.clear(); 

    let componentRef = viewContainerRef.createComponent(componentFactory); 
    (<AdComponent>componentRef.instance).data = adItem.data; 

    //Subscribe to the events here 
    (<AdComponent>componentRef.instance).deleteBanner.subscribe(evt => console.log(`Event: ${evt}`)); 
}