在选项卡菜单显示的两个单独的Ag-Grid上使用Ag-Grid的sizeColumnsToFit（）时，警告“网格零宽度”

Question

调整ag-Grid的大小（更改浏览器窗口的大小）并在两个选项卡之间切换时，收到以下警告：

ag-Grid：尝试调用sizeColumnsToFit（），但是网格返回的宽度为零，也许网格在屏幕上还不可见？

我在Stackblitz中重现了这种情况：

https://angular-jpmxjy.stackblitz.io/

这是测试应用程序的组成：

• PrimeNG p-tabMenu位于组件：header.component
• 组件上的ag-Grid：delleverancer.component和legancer.component。

调整网格大小并在tabMenu“ Leverancer”和“ Delleverancer”之间切换时，您会在chrome开发工具中看到警告错误。

您可以在此处查看代码：

https://stackblitz.com/edit/angular-jpmxjy

如何清除此不必要的警告错误？

Answer 1

这些错误通常意味着您的应用程序中存在内存泄漏。

查看代码后，我注意到您如何订阅window:resize活动

window.addEventListener("resize", function () { ...

您应该知道，即使在组件被销毁后，该订阅仍将存在。

您可以写removeEventListener在ngOnDestroy钩子上。但是为此，您必须保留对原始附加功能的引用。更好的方法是使用专用的Angular @HostListener装饰器，该装饰器将负责以下操作removeEventListener：

@HostListener('window:resize')
onResize() {
  if (!this.gridApi) return;

  setTimeout(() => {
    this.gridApi.sizeColumnsToFit();
  });
}

分叉的Stackblitz

为了不重复自己，您可以创建如下指令：

ag-grid-resize.directive.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[ag-grid-resize]'
})
export class AgGridResizeDirective {
  private gridApi;

  @HostListener('window:resize')
  onResize() {
    if (!this.gridApi) return;

    setTimeout(() => {
      this.gridApi.sizeColumnsToFit();
    });
  }

  @HostListener('gridReady', ['$event'])
  onGridReady(params) {
    this.gridApi = params.api;

    params.api.sizeColumnsToFit();
  }
}

现在，您需要添加该行为的所有操作就是将属性添加到网格中：

<ag-grid-angular 
  ...
  ag-grid-resize       <============
>
</ag-grid-angular>

Stackblitz示例

Answer 2

旧线程，但对于反应答案和未来的受害者，我遇到了同样的问题，问题是使用 componentWillUnmount 清理事件侦听器。

要查看事件侦听器发生了什么，请使用（在 Chrome 中）getEventListeners(window) 并观察您的组件如何添加它们，但在更改页面等时不删除它们。实施下面的解决方案后，您应该看到事件侦听器已被删除当您的组件被销毁时。

需要为侦听器使用一个函数，以便您有适当的参考来删除。

假设基于类的方法：

export class someAgGrid extends Component { your brilliance }

componentWillUnmount() {
     window.removeEventListener('resize', this.daListener);
 };

daListener = () => {
    if (!this.gridApi) return;
    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 200);
 };

firstDataRendered = (params) => {
    this.gridApi = params.api;
    this.gridApi.sizeColumnsToFit();
    window.addEventListener('resize', this.daListener);
 };

在渲染功能中：

return (
     <div className='ag-theme-material'>
        <AgGridReact
            ...your stuff
            onFirstDataRendered={this.firstDataRendered}
        />
     </div>
 )