如果子组件为动态组件，如何将数据从子组件传递给父组件

Question

http://plnkr.co/edit/AcQM5h

I've created a plunker. The structure: I have an app.ts and than a buttons.component. When I click on buttons.component I am to pass the data to app.ts and from app.ts to cats-component where I use the data. So I am basically able to go up to the parent one level and than down other file path.

I am stuck as I am not able to pass the data from cats-component to app.ts as cats-component is generated on the fly.

This is cats component:

import {Component, Injector, View, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `
    <div>This is the Child Component Hello world</div>
    {{colordata}}

    <input value="send me now" #catsinput />
    <button (click)="getdata(catsinput.value)">Give to parent</button>

  `,
   outputs: ['passdatatoParent']
})
export default class catsComponent {
  colordata = 0;
  passdatatoParent: EventEmitter<any> = new EventEmitter();

  getdata(value){
    this.passdatatoParent.emit(value);
    console.log('get cats data', value)
  }

  constructor(private injector: Injector) {
    this.colordata = this.injector.get('colordata');


  }
}

This is the parent:

import {Component, NgModule, Input, Output, EventEmitter } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import catsComponent from './cats-component';
import dogsComponent from './dogs-component';
import DynamicComponent from './dynamic-component';
import DynamicComponent from './dynamic-component';
import {ButtonsComponent} from './buttons.component';
import {componentList} from './components-list';
import * as _ from "lodash";

@Component({
  selector: 'my-app',
  template: `
    <div>

      <buttons (passdata)="getthis($event)" ></buttons>

      <button (click)="loadDogs()">Load Dogs</button>
      <dynamic-component [componentData]="componentData" (passdatatoParent)="getChildEvent($event)"></dynamic-component>
      <!--<dynamic-component [componentData]="componentData" ></dynamic-component>-->
    </div>
  `,
})



export class AppComponent {
  componentData = null;
  components:any = componentList;
  showvalue: string;

  getthis(evt){
    console.log(this.components)
    console.log('here it is' , evt);
    this.showvalue = evt;

    this.componentData = {
      component: catsComponent,
      inputs: {
        colordata: evt
      }
    };

  }
  getChildEvent(evt){
    console.log('got this from the child', evt) // NOT ABLE TO RECIEVE DATA
  }


 constructor(){

  }


  loadDogs(){
    this.componentData = {
      component: dogsComponent,
      inputs: {
        showNum: 2
      }
    };
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent, catsComponent, dogsComponent, DynamicComponent, ButtonsComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Answer 1

1) Because event from EventEmitter doesn't bubble you can use custom DOM event to achieve it:

cats.component.ts

constructor(private elRef: ElementRef) {}

getdata(value){
  this.elRef.nativeElement.dispatchEvent(
    new CustomEvent('passdatatoParent', { bubbles: true, detail: value }));
}

app.component.ts

getChildEvent(evt){
  console.log('got this from the child', evt.detail);
}

Plunker Example

2) Otherwise you have to create @Output event inside DynamicComponent and subscribe to event from dynamic component

dynamic.component.ts

passdatatoParent: EventEmitter<any> = new EventEmitter();

subscription: any;
...
if(this.subscription) {
  this.subscription.unsubscribe();
}
if(component.instance.passdatatoParent) {
  this.subscription = component.instance.passdatatoParent
      .subscribe(x => this.passdatatoParent.emit(x))
}

Plunker Example

3) Another solution would be passing callback function as input

app.component.ts

this.componentData = {
  component: catsComponent,
  inputs: {
    colordata: evt,
    passdatatoParent: (val) => {
      console.log(val);
    }
  }
};

cats.component.ts

getdata(value){
  this.injector.get('passdatatoParent')(value);
}

Plunker Example