如何在任何事件上重新初始化 ag-grid？答案

【问题标题】：How to reinitialize ag-grid on any event?如何在任何事件上重新初始化 ag-grid？
【发布时间】：2019-08-23 11:30:52
【问题描述】：

我通过单击我想将 enableRtl 属性设置为 true 的按钮创建了一个 ag-grid 组件。

简而言之，我添加了一个组件，比如说 -

<ag-grid-angular #agGrid [floatingFilter]="true" 
      [enableRtl]="isArabic" (gridReady)="onGridReady($event)" 
      [(enableRtl)]="enableRtl" 
      [rowSelection]="rowSelection"
      [defaultColDef]="columnConfig" [rowData]="data" 
      [columnDefs]="columns"                   
      [gridOptions]="gridOptions"
></ag-grid-angular>

现在我想根据点击事件更改 enableRtl。

这里，enableRtl 是组件的公共变量。

但是，它并不反映 RTL。

我在 Stackblitz 添加了场景 -

https://stackblitz.com/edit/angular-ag-grid-col-span-and-col-group-tsso85

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

有一种方法可以实现这一点。

在ag-grid-angular 元素级别有一个ngIf 的标志，并在您的事件处理程序中有条件地切换它。

<ag-grid-angular *ngIf="showGrid"
     class="ag-theme-material"
     [rowData]="rowData"
     [columnDefs]="columnDefs | async"
     [gridOptions]="gridOptions"
     [enableRtl]="lang"
>
</ag-grid-angular>

这样，网格将使用更新的标志重新初始化。

请记住，在重新初始化网格时，此处涉及性能成本。如果您认为影响可以忽略不计，这取决于您，这就是您的解决方案。

查看更新后的 Stackblitz：ag-grid : RTL <-> LTR

【讨论】：

【解决方案2】：

它需要重新加载gridOptions，atm ag-grid 不提供动态重新加载关键设置的可能性，更多细节here

【讨论】：