AG Grid子组件调用父组件异步函数：优化方案咨询

你的现有方案虽然能正常运行，但存在耦合度高、类型不安全的问题（直接传递父组件实例this，子组件强依赖父组件的具体类实现），下面是几种更符合Angular组件设计理念的优化方案：

方案1：使用@Output事件传递请求，父组件返回数据 #

这种方式完全解耦父子组件，子组件只负责触发数据请求事件，父组件处理具体的获取逻辑并返回结果，是组件通信的常用最佳实践。

子组件代码 #

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

@Component({
  selector: 'lookup-table-component',
  // 模板省略
})
export class LookupTableComponent {
  @Output() fetchPageData = new EventEmitter<{paging: any, filterModel: any}>();

  async createDatasource(): Promise<IServerSideDatasource> {
    return {
      getRows: async (params: IServerSideGetRowsParams) => {
        this.createRequestPayload(params.request);
        // 触发事件，将请求参数传递给父组件
        const rowData = await this.fetchPageData.emit({
          paging: this.paging,
          filterModel: this.filterModel
        });
        params.success({ rowData });
      },
    };
  }

  private createRequestPayload(request: any) {
    // 你的参数处理逻辑
    this.paging = /* 处理后的分页参数 */;
    this.filterModel = /* 处理后的筛选模型 */;
  }
}

父组件代码 #

<lookup-table-component
  (rowClicked)="onGridRowClicked($event)"
  [gridOptions]="gridOptions"
  (fetchPageData)="getPageData($event.paging, $event.filterModel)"
></lookup-table-component>

// 父组件的getPageData方法保持原有逻辑
async getPageData(paging: any, filterModel: any) {
  const response = await this.apiService.fetchTableData(paging, filterModel);
  return response.rowData;
}

方案2：传递数据获取函数作为@Input #

通过输入属性传递具体的函数而非整个组件实例，既保留灵活性，又降低耦合度，同时可通过类型定义保证参数和返回值的安全性。

子组件代码 #

import { Component, Input } from '@angular/core';
import { IServerSideDatasource } from 'ag-grid-angular';

// 定义类型，约束函数的参数和返回值
type FetchPageDataFn = (paging: any, filterModel: any) => Promise<any[]>;

@Component({
  selector: 'lookup-table-component',
  // 模板省略
})
export class LookupTableComponent {
  @Input() fetchPageData: FetchPageDataFn;

  async createDatasource(): Promise<IServerSideDatasource> {
    return {
      getRows: async (params) => {
        this.createRequestPayload(params.request);
        const rowData = await this.fetchPageData(this.paging, this.filterModel);
        params.success({ rowData });
      },
    };
  }

  private createRequestPayload(request: any) {
    // 你的参数处理逻辑
    this.paging = /* 处理后的分页参数 */;
    this.filterModel = /* 处理后的筛选模型 */;
  }
}

父组件代码 #

<lookup-table-component
  (rowClicked)="onGridRowClicked($event)"
  [gridOptions]="gridOptions"
  [fetchPageData]="getPageData.bind(this)"
></lookup-table-component>

注意：使用bind(this)确保父组件方法执行时的上下文正确，也可以用箭头函数替代：[fetchPageData]="(p,f) => this.getPageData(p,f)"

方案3：依赖注入抽象服务（适合多父组件遵循统一契约场景） #

如果多个父组件都需要给该子组件提供数据，且数据获取的规则一致，可以定义抽象服务，父组件实现该服务并注入，子组件依赖抽象服务而非具体实现，符合依赖倒置原则。

1. 定义抽象服务 #

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

@Injectable()
export abstract class PageDataService {
  abstract getPageData(paging: any, filterModel: any): Promise<any[]>;
}

2. 父组件提供具体实现 #

import { Component } from '@angular/core';
import { PageDataService } from './page-data.service';

@Component({
  selector: 'parent-component',
  // 模板省略
  providers: [
    {
      provide: PageDataService,
      useClass: ParentPageDataImpl
    }
  ]
})
export class ParentComponent {
  // 其他逻辑省略
}

// 父组件对应的具体服务实现
class ParentPageDataImpl extends PageDataService {
  async getPageData(paging: any, filterModel: any) {
    // 具体的数据获取逻辑
    return /* 接口返回的行数据 */;
  }
}

3. 子组件注入抽象服务 #

import { Component, Inject } from '@angular/core';
import { IServerSideDatasource } from 'ag-grid-angular';
import { PageDataService } from './page-data.service';

@Component({
  selector: 'lookup-table-component',
  // 模板省略
})
export class LookupTableComponent {
  constructor(@Inject(PageDataService) private pageDataService: PageDataService) {}

  async createDatasource(): Promise<IServerSideDatasource> {
    return {
      getRows: async (params) => {
        this.createRequestPayload(params.request);
        const rowData = await this.pageDataService.getPageData(this.paging, this.filterModel);
        params.success({ rowData });
      },
    };
  }

  private createRequestPayload(request: any) {
    // 你的参数处理逻辑
    this.paging = /* 处理后的分页参数 */;
    this.filterModel = /* 处理后的筛选模型 */;
  }
}

方案对比 #

• 方案1：最通用，完全解耦，适合绝大多数场景，子组件无需关心数据来源。
• 方案2：实现简单，灵活性高，适合单一父组件或需要传递不同获取逻辑的场景。
• 方案3：适合多父组件遵循同一数据获取契约的场景，扩展性强，符合面向对象设计原则。

内容的提问来源于stack exchange，提问作者Ritik Sahu