如何让ag-Grid事件访问私有方法？解决窗口Resize订阅报错问题

DevOps 小满

2026-7-11

问题：ag-Grid事件中无法访问组件私有成员导致RxJS报错

你在实现ag-Grid随窗口宽度变化动态调整列宽，并在组件销毁时清理resize订阅的过程中，遇到以下问题：

组件私有变量destroyed$在ngOnInit中正常存在，但在onGridReady事件回调里打印为undefined
触发RxJS错误：ERROR TypeError: You provided 'undefined' where a stream was expected

根本原因

当你在gridOptions中直接赋值onGridReady: this.onGridReady时，ag-Grid调用这个函数会丢失组件的this上下文——此时函数内的this指向ag-Grid的上下文而非组件实例，自然无法访问组件的destroyed$变量。

解决方案

方法1：构造函数内绑定`this`上下文

在组件构造函数里手动把onGridReady的this绑定到组件实例，确保回调执行时上下文正确：

constructor() {
    console.log('Construct');
    // 绑定this到组件实例
    this.onGridReady = this.onGridReady.bind(this);
}

public gridOptions: GridOptions = {
    ...,
    onGridReady: this.onGridReady,
};

方法2：用箭头函数定义`onGridReady`

箭头函数会自动捕获当前组件的this上下文，无需手动绑定，直接修改函数定义方式：

// 改为箭头函数形式
onGridReady = (params: GridReadyEvent) => {
    console.log('gridReady', this.destroyed$); // 此时this指向组件实例
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
    fromEvent(window, 'resize')
        .pipe(debounceTime(200), takeUntil(this.destroyed$))
        .subscribe(() => {
            console.log('Window resizing');
            this.gridApi?.sizeColumnsToFit();
        });

    params.api.setDatasource(this.dataSource);
    params.api.sizeColumnsToFit();
}

public gridOptions: GridOptions = {
    ...,
    onGridReady: this.onGridReady,
};