Angular 具有无限滚动功能的 ag-grid 上的动态主题更改
Dynamic theme change on Angular ag-grid with infinite scroll
我的 Angular 9 应用程序中有一个 Ag-grid,无限滚动正常工作,我想实现一个主题选择器,就像 demo.
中的那样
但是,仅更改 CSS class 不足以更改主题,因为主题更改时不会更新行高。
我尝试在更改主题后调用 refreshCells
和 resetRowHeights
,但都没有更新行高。
演示的源代码似乎在主题更改时销毁并重新创建网格,this GitHub 问题似乎证实动态更改主题的最佳方法是销毁网格并重新创建它。
但是,在调用 gridApi.destroy()
之后,我一直无法找到重新创建网格的方法。
有办法吗?
我在 this plunkr 中找到了答案:
要销毁和重新创建网格,它需要位于具有 *ngIf
的容器元素中,以便可以动态地删除和重新创建它:例如,如果容器元素是
<div *ngIf="gridActive">
<ag-grid ....>
</div>
然后在组件代码中可以通过以下方式更改主题:
recreateGrid() {
this.gridActive = false;
setTimeout(() => {
this.gridActive = true;
});
}
我的 Angular 9 应用程序中有一个 Ag-grid,无限滚动正常工作,我想实现一个主题选择器,就像 demo.
中的那样但是,仅更改 CSS class 不足以更改主题,因为主题更改时不会更新行高。
我尝试在更改主题后调用 refreshCells
和 resetRowHeights
,但都没有更新行高。
演示的源代码似乎在主题更改时销毁并重新创建网格,this GitHub 问题似乎证实动态更改主题的最佳方法是销毁网格并重新创建它。
但是,在调用 gridApi.destroy()
之后,我一直无法找到重新创建网格的方法。
有办法吗?
我在 this plunkr 中找到了答案:
要销毁和重新创建网格,它需要位于具有 *ngIf
的容器元素中,以便可以动态地删除和重新创建它:例如,如果容器元素是
<div *ngIf="gridActive">
<ag-grid ....>
</div>
然后在组件代码中可以通过以下方式更改主题:
recreateGrid() {
this.gridActive = false;
setTimeout(() => {
this.gridActive = true;
});
}