Question

http://plnkr.co/edit/AcQM5h

我创造了一个掠夺者。结构：我有一个app.ts而不是buttons.component。当我点击buttons.component时，我将数据传递到app.ts，然后从app.ts传递到我使用数据的cats-component。所以我基本上能够达到父级别，而不是其他文件路径。

我陷入困境，因为我无法将数据从cats-component传递到app.ts，因为cat-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');


  }
}

这是父母：

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

<强> 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

如果Child组件动态组件，如何将数据从Child传递给Parent

1 个答案: