Angular EventEmitter 向父组件公开值答案

【问题标题】：Angular EventEmitter exposing value to parent componentAngular EventEmitter 向父组件公开值
【发布时间】：2018-03-11 11:37:18
【问题描述】：

在我的 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 似乎有点矫枉过正......

【问题讨论】：

你也可以分享你的模板吗？可能是语法或传递参数有问题
我的模板中没有指令...一切都是通过组件生成的。另外，为什么我需要在模板中添加任何内容？我只需要 parent.components.ts 就可以访问 child.components.ts 中的值 .... 我希望我很清楚...
在您添加子组件标签的地方发布您的 html
我已按要求在我的子组件中发布了 html。
我没有看到父 html，你在哪里使用 row-details 标签？

标签： javascript angular eventemitter

【解决方案1】：

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

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

然后在父组件的ts文件中

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

【讨论】：