Angular 5中Ag-Grid子组件行双击事件无法传递到父组件求助

嘿，我一眼就揪出问题所在了——父组件模板里的事件绑定存在语法小错误，这直接导致子组件发出的事件没被父组件正确监听，所以才看不到任何输出。咱们一步步来搞定：

1. 先修复父组件的模板语法问题 #

你当前的父组件模板代码是这样的：

<app-grid-client (clientRow)='rowClient($event) >

这里缺少了闭合的括号 )、引号 "，而且组件标签也没闭合。正确的写法应该是：

<h3>List of client</h3>
<app-grid-client (clientRow)="rowClient($event)"></app-grid-client>

这个不起眼的语法错误会让Angular无法正确解析事件绑定，父组件的rowClient方法根本不会被触发，自然就看不到任何输出了。

2. 确认子组件的写法没问题（给你打个定心针） #

你的子组件代码其实是完全正确的：

• 用@Output()装饰器声明了clientRow事件发射器，符合Angular的组件通信规范；
• 用箭头函数clientAdd=(row)=>{}绑定onRowDoubleClicked，这能保证this始终指向子组件实例，所以this.clientRow.emit(row.data)能正确发出事件——你子组件里能正常打印行数据也证明了这部分是OK的。

修复后的完整代码示例 #

子组件（client-grid.component.ts） #

import { Component, Output, EventEmitter } from '@angular/core';
import { GridOptions } from 'ag-grid-angular';

@Component({
  selector: 'app-grid-client',
  templateUrl: './client-grid.component.html'
})
export class ClientGridComponent {
  @Output() clientRow: EventEmitter<any> = new EventEmitter();
  gridOptions: GridOptions;

  createGridOptions() {
    this.gridOptions = <GridOptions>{};
    // 箭头函数确保this指向组件实例，避免this丢失问题
    this.gridOptions.onRowDoubleClicked = this.clientAdd;
  }

  clientAdd = (row) => {
    this.clientRow.emit(row.data);
    console.log(row.data); // 子组件正常打印数据
  }
}

父组件模板（quotation-creation.component.html） #

<h3>List of client</h3>
<app-grid-client (clientRow)="rowClient($event)"></app-grid-client>

父组件TS（quotation-creation.component.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-quotation-creation',
  templateUrl: './quotation-creation.component.html'
})
export class QuotationCreationComponent {
  rowClient(row) {
    console.log(row); // 现在就能正常接收到子组件传来的数据啦
  }
}

改完之后再运行，父组件的控制台应该就能正常打印双击的行数据了！

内容的提问来源于stack exchange，提问作者Hammami Yosra