[英]Angular EventEmitter exposing value to parent component
In my Angular application I have a child grid component inside of my parent component, and I am trying to emit some data from my child grid to the parent container. 在我的Angular应用程序中,我的父组件内部有一个子网格组件,并且试图将一些数据从子网格发送到父容器。 I have used event emitter to try to "emit" that value to the parent, but when I try to access that variable that contains the data in the parent component it logs as undefined.
我已经使用事件发射器尝试将值“发射”给父级,但是当我尝试访问包含父级组件中数据的变量时,它记录为未定义。
Here is what I have inside of my child component: 这是我的子组件内部的内容:
@Component({
selector: 'row-details',
templateUrl: './row-details.component.html'
})
export class ChildRowDetailsComponent {
childRowData: any[];
@Output() emitRowData = new EventEmitter<any>();
constructor(...) {}
createRowData(gridValues) {
let rowData: any[] = [];
for (let i = 0; i < gridValues.length; i++) {
let data = gridValues[i % gridValues.length];
rowData.push({
...
});
}
this.childRowData = rowData;
this.emitRowData.emit(this.childRowData);
}
... } ...}
child.component.html: child.component.html:
<ag-grid-angular #agGrid style="width: 100%; height:100%" class="ag-material grid-Holdings"
[rowData]="rowData"
[getRowHeight]="getRowHeight"
headerHeight="35"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
As you can see, I am trying to "emit" this.childRowData to my parent. 如您所见,我正在尝试将此this.childRowData发射给我的父母。
In my parent component I try to access it in a method like so: 在我的父组件中,我尝试使用如下方法访问它:
...
getChildRowData(params, childRowData) {
// I would like to do something with childRowData
}
...
This does not work because childRowData is undefined. 这是无效的,因为childRowData是未定义的。 Do I need to do something specific to have my parent component "listen" for the event?
我需要做一些特定的事情来让我的父组件“监听”该事件吗? Also, do I really need an event emitter for this?
另外,我真的需要为此使用事件发射器吗? Can't I just get childRowData as a global variable via a service?
我是否只能通过服务将childRowData作为全局变量获取? EventEmitter seems overkill in this case...
在这种情况下,EventEmitter似乎过于杀伤……
To get access to the outputted event, the template of the parent component should have a line like this somewhere: 要访问输出的事件,父组件的模板应该在某处有这样的行:
<row-details (emitRowData)="getChildRowData($event)"></row-details>
and then in the parent component's ts file 然后在父组件的ts文件中
getChildRowData(childRowData) {
/* do stuff with the data here */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.