動的にロードされた子コンポーネントから親にイベントをバブリングすることはできますか？

Question

イベントを動的にロードされた子コンポーネントからその親コン​​ポーネントに放出/バブルする必要があります。私はそれに角のタブを持つ親コンポーネントを持っています。タブの中で、子コンポーネントを動的にロードします。これらは動的にロードされるため、子コンポーネントから親コンポーネントにイベントを呼び出すことはできません。

イベントは子コンポーネントでトリガーされますが、親によって聴かれていませんか？

次のようにタブがある含まれている私の親コンポーネント：

<div fxLayout="column" fxLayout.gt-sm="row"> 
    <md-tab-group class="tab-group" dynamicHeight (selectedIndexChange)="onTabChange($event)" style="width:100%; height:100%"> 
     <md-tab *ngFor="let tab of homepageTabs; let i = index"> 
     <ng-template mdTabLabel>{{tab.label}}</ng-template> 
     </md-tab> 
    </md-tab-group> 
    </div> 
    <div> 
    <div #tabContent></div> 
    </div> 

コンポーネントのコード

export class HomePageComponent implements OnInit { 

     private tabContentComponents = [ 
     ]; 

     @ViewChild('tabContent', { read: ViewContainerRef }) 
     tabContent: ViewContainerRef; 

     // Model for tabs 
     homepageTabs = [ 
     { 
      label: 'HomeLabel', 
      tabTitle: 'HomeTitle' 
     }, 
     { 
      label: 'App Details', 
      tabTitle: 'App Details' 
     } 
     ]; 
     constructor(private router: Router, private cfr: ComponentFactoryResolver) { 
     } 

//this is the place where I am loading the child component dynamically based on some logic... 
     onTabChange(tabIndex) { 
     console.log("tabIndex : " + tabIndex); 
     if (tabIndex == 0) { 
      const factory = this.cfr.resolveComponentFactory(ApplicationListComponent); 
      this.tabContent.clear(); 
      this.tabContent.createComponent(factory); 
     } 
     if (tabIndex == 1) { 
      const factory = this.cfr.resolveComponentFactory(ApplicationDetailsComponent); 
      this.tabContent.clear(); 
      this.tabContent.createComponent(factory); 
     } 
     } 

     //This is the event which needs to be bubbled up from the child component  
     OpenReportListEvent(event: any) { 
     //do something here 
     } 
    } 

は私の子コンポーネントがイベントを発生させるためにどのように

export class ApplicationListComponent implements OnInit { 

    @Output() openReportListEvent = new EventEmitter(); 

    constructor(){ 
    } 

    //This is the event which needs to emit to the parent component 
    OpenReportList(application: any) 
    { 
    this.openReportListEvent.emit(); 
    } 
} 

、以下のようになります。このシナリオでは親コンポーネントに？

Answer 1

私はComponentRefthis.tabContent.createComponent(factory);戻っていることを前提とし、あなたは基本的にインスタンスを手に入れることができますし、そのプロパティに直接結合する：

const componentRef = this.tabContent.createComponent(factory); 
componentRef.instance.openReportListEvent.subscribe((v)=>{this.OpenReportListEvent(v)})