angular2打字稿从动态加载组件的父调用方法

Question

我想从动态加载的组件调用父方法。我正在使用Angular Cookbook的动态组件加载器解决方案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>; 
} 

并订阅，以从组件事件：

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