Angular中函数作为输入传递给子组件时的引用问题咨询

你好呀！先帮你梳理下当前的场景：你正在基于ag-grid封装一套自定义的data-grid组件，核心目标就是做一层抽象隔离——以后如果客户要替换ag-grid为其他表格库，不用去修改N多业务页面，只需要更新这个自定义组件就行，这个思路真的很务实！

目前你的组件层级是这样的：

• App Component（依赖私有Service）
  • 自定义Data-Grid组件
    • ag-grid-angular官方组件

现在你要实现服务端行模型（SSRM），还想把API请求、响应映射的逻辑从组件内部抽离出去，让外部来控制对吧？不过看起来你在把函数作为输入传递给子组件时遇到了引用相关的问题？我来给你捋捋常见的坑和解决办法：

常见问题1：函数引用频繁变化导致子组件重复执行 #

当你在父组件模板里直接传递匿名函数/箭头函数给子组件的@Input时，每次父组件触发变更检测，都会生成新的函数引用，导致子组件频繁执行不必要的逻辑（比如ag-grid反复触发请求）。

解决办法：

• 把业务函数绑定为父组件的类成员方法，不要在模板里临时创建函数：

  // App Component 代码
  constructor(private yourPrivateService: YourPrivateService) {}
  
  // 定义为类成员方法
  fetchGridData(params: any) {
    return this.yourPrivateService.getServerData(params);
  }
  
  mapGridResponse(rawData: any) {
    // 这里写你的响应转换逻辑
    return transformedData;
  }
  

  然后模板里直接传递这个类方法：

  <app-data-grid 
    [fetchData]="fetchGridData"
    [mapResponse]="mapGridResponse"
  ></app-data-grid>
  

• 如果函数需要依赖父组件的上下文（比如访问组件内的变量），可以在组件初始化时用bind固定上下文，或者直接用箭头函数定义类成员：

  // 用箭头函数自动继承父组件上下文
  fetchGridData = (params: any) => {
    return this.yourPrivateService.getServerData(params);
  }
  

常见问题2：子组件调用函数时上下文丢失 #

有时候把父组件的函数传给子组件后，调用时this指向会跑偏，导致无法访问父组件的Service或变量。

解决办法：

• 用上面提到的箭头函数定义方法，或者在父组件初始化时绑定上下文：

  ngOnInit() {
    this.boundFetchData = this.fetchGridData.bind(this);
  }
  

  模板里传递boundFetchData即可保证this指向父组件实例。

针对SSRM的特殊优化建议 #

对于ag-grid的SSRM，你可以把核心的getRows方法完全抽离到父组件或私有Service中，再把这个方法作为输入传给自定义Data-Grid组件，组件只负责把方法转发给ag-grid的gridOptions。这样后续替换表格库时，只需要在自定义组件里适配新库的请求逻辑，外部业务代码完全不用改动。

举个简单的实现示例：

// 父组件代码
gridServerSideGetRows = (params: IServerSideGetRowsParams) => {
  this.yourPrivateService.fetchServerSideData(params.request).subscribe(res => {
    params.success({
      rowData: this.mapGridResponse(res.data),
      rowCount: res.totalCount
    });
  });
}

<!-- 自定义Data-Grid组件模板 -->
<ag-grid-angular
  [gridOptions]="{
    serverSideRowModel: true,
    getRows: gridServerSideGetRows
  }"
></ag-grid-angular>

这样一来，API请求、响应映射全在父组件/Service里，自定义组件只做逻辑转发，完美实现你要的“外部化”需求，同时也规避了函数引用的问题。如果你的具体问题还有细节没说清楚，可以补充信息，我再帮你针对性解决~

备注：内容来源于stack exchange，提问作者Bopsi