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

我创造了一个劫掠者。结构：我有一个app.ts，而不是一个buttons.component。当我点击buttons.component时，我要将数据传递到app.ts，并从app.ts传递到我使用数据的cats组件。 因此，我基本上能够上升到父级一级，而不是下降到其他文件路径

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

这是cats组件：

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


  }
}

从'@angular/core'导入{组件、注入器、视图、输出、事件发射器}；
@组成部分({
选择器：“你好，世界”，
模板：`
这是Hello world的子组件
{{colordata}
给父母
`,
输出：['passdatatoParent']
})
导出默认类CATS组件{
colordata=0；
passdatatoParent:EventEmitter=neweventemitter（）；
getdata（值）{
this.passdatatoParent.emit（值）；
console.log（'get cats data'，value）
}
构造函数（专用注入器：注入器）{
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 {}

从'@angular/core'导入{Component，NgModule，Input，Output，EventEmitter}
从“@angular/platform browser”导入{BrowserModule}
从“/cats组件”导入cats组件；
从“/dogs component”导入dogsComponent；
从“./dynamic component”导入DynamicComponent；
从“./dynamic component”导入DynamicComponent；
从“./buttons.component”导入{ButtonsComponent}；
从“./components list”导入{componentList}；
从“lodash”中导入*as uu；
@组成部分({
选择器：“我的应用程序”，
模板：`
装载狗
`,
})
导出类AppComponent{
componentData=null；
组件：任意=组件列表；
showvalue:字符串；
getthis（evt）{
console.log（this.components）
log（'here is'，evt）；
this.showvalue=evt；
this.componentData={
组件：CATS组件，
投入：{
颜色数据：evt
}
};
}
getChildEvent（evt）{
console.log（'从子级获得此信息'，evt）//无法接收数据
}
构造函数（）{
}
载重狗（）{
this.componentData={
组件：dogsComponent，
投入：{
showNum:2
}
};
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[AppComponent、catsComponent、dogsComponent、DynamicComponent、ButtonsComponent]，
引导：[AppComponent]
})
导出类AppModule{}

1）因为来自

EventEmitter

的事件不会冒泡，所以您可以使用自定义DOM事件来实现它：

cats.component.ts

constructor(private elRef: ElementRef) {}

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

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

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

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

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

应用程序组件.ts

constructor(private elRef: ElementRef) {}

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

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

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

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

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

2） 否则，您必须在

DynamicComponent

中创建

@Output

事件，并从DynamicComponent订阅事件

动态.component.ts

constructor(private elRef: ElementRef) {}

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

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

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

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

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

cats.component.ts

constructor(private elRef: ElementRef) {}

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

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

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

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

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

---

根据您的第一个结果，我检查了what is:ElementRef以了解func和Get's允许直接访问DOM会使您的应用程序更容易受到XSS攻击。'angular site:有什么想法吗？这真的有风险吗？如果你不打算使用webworker或服务器渲染，那么我在2版上看不到任何问题，我似乎没有在app.ts第46行中工作，它应该注销，但在日志中似乎看不到任何东西我看不到你的结果。有人打劫吗？