我创建了一个笨蛋。结构:我有一个app.ts 和一个buttons.component。当我单击 Buttons.Component 时,我将数据传递到 app.ts 并从 app.ts 传递到我使用数据的 cats-component 。 所以我基本上能够上升到父一级,而不是下降到其他文件路径。
我陷入困境,因为我无法将数据从 cats-component 传递到 app.ts,因为 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');
}
}
这是父级:
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 {}
最佳答案
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
关于javascript - 如果Child组件动态组件,如何将数据从Child传递到Parent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43209557/