如何从儿童将数据传递给家长，如果孩子组件动态组件

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事件和动态组件

动态订阅事件。 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