Angular EventEmitter将值暴露给父组件

Question

在我的Angular应用程序中，我的父组件内部有一个子网格组件，并且试图将一些数据从子网格发送到父容器。 我已经使用事件发射器尝试将值“发射”给父级，但是当我尝试访问包含父级组件中数据的变量时，它记录为未定义。

这是我的子组件内部的内容：

@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：

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

如您所见，我正在尝试将此this.childRowData发射给我的父母。

在我的父组件中，我尝试使用如下方法访问它：

...
getChildRowData(params, childRowData) {
    // I would like to do something with childRowData
}
...

这是无效的，因为childRowData是未定义的。 我需要做一些特定的事情来让我的父组件“监听”该事件吗？ 另外，我真的需要为此使用事件发射器吗？ 我是否只能通过服务将childRowData作为全局变量获取？ 在这种情况下，EventEmitter似乎过于杀伤……

Answer 1

要访问输出的事件，父组件的模板应该在某处有这样的行：

<row-details (emitRowData)="getChildRowData($event)"></row-details>

然后在父组件的ts文件中

getChildRowData(childRowData) {
    /* do stuff with the data here */
}