具有无限滚动的Angular ag-grid上的动态主题更改答案

【问题标题】：Dynamic theme change on Angular ag-grid with infinite scroll具有无限滚动的Angular ag-grid上的动态主题更改
【发布时间】：2021-01-26 18:06:22
【问题描述】：

我的 Angular 9 应用程序中有一个 Ag-grid，无限滚动工作正常，我想实现一个主题选择器，如 demo 中的主题选择器。

但是，仅仅更改 CSS 类并不足以更改主题，因为行高不会在主题更改时更新。

我尝试在更改主题后调用refreshCells 和resetRowHeights，但都没有更新行高。

演示的源代码似乎会在主题更改时破坏并重新创建网格，this GitHub issue 似乎确认动态更改主题的最佳方法是破坏网格并重新创建它。

但是，在调用gridApi.destroy() 之后，我一直无法找到重新创建网格的方法。

有办法吗？

【问题讨论】：

【解决方案1】：

我在this plunkr找到了自己的答案：

要销毁和重新创建网格，它需要在带有*ngIf 的容器元素中，以便可以动态删除和重新创建它：例如，如果容器元素是

<div *ngIf="gridActive">
    <ag-grid ....>
</div>

然后在组件代码中可以通过以下方式更改主题：

recreateGrid() {
    this.gridActive = false;
    setTimeout(() => {
      this.gridActive = true;
    });
}

【讨论】：