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

Question

http://plnkr.co/edit/AcQM5h

我创建了一个 plunker。结构：我有一个 app.ts 而不是一个buttons.component。当我单击buttons.component 时，我要将数据传递给app.ts，并从app.ts 传递给我使用数据的cats-component。 所以我基本上能够上一级父级，而不是其他文件路径。

我被卡住了，因为我无法将数据从猫组件传递到 app.ts，因为猫组件是动态生成的。

这是猫组件：

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');


  }
}

这是父母：

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) 因为来自EventEmitter 的事件不会冒泡，所以您可以使用自定义 DOM 事件来实现它：

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) 否则你必须在DynamicComponent 中创建@Output 事件并从动态组件订阅事件

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) 另一种解决方案是将回调函数作为输入传递

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