当隐藏的 ag-grid 变得可见时，调整列的大小以适合隐藏的 ag-grid

Question

通常我只是使用 gridReady 事件，获取 api 并调用 sizeColumnsToFit()。

export class MyGridApplicationComponent {
    private gridOptions: GridOptions;
    private showGrid2: false;

    constructor() {
        this.gridOptions = <GridOptions>{
          onGridReady: this.gridReady.bind(),
          ....
        };
    }
    gridReady(params) {
      params.api.sizeColumnsToFit();
    }
    ....

但是，我有一个位于隐藏选项卡中的网格，因此当调用 gridReady 事件时，宽度为 0（在控制台中获取消息：“尝试调用 sizeColumnsToFit() 但网格返回时宽度为零，也许网格在屏幕上还不可见？”）。

<h2>Grid only visible after button click</h2>
<button (click)="showGrid2 = true;">Show grid</button><br/><br/>
<div style="width: 100%;" [hidden]="!showGrid2">

    <ag-grid-angular #agGrid2 style="width: 100%; height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

当 ag-grid 变得可见时，是否有一个我可以挂钩的事件，以便我可以调整其大小/适合它？我尝试了一些模糊相关的事件（gridSizeChanged、firstDataRendered、columnVisible、columnResized）但无济于事。

我在 StackBlitz 中有一个简化的重现。

[编辑]我尝试对下面的@antirealm建议进行修改（查看父div上的 *ngIf 是否有所作为），这对我的问题（过度）简化版本有效：请参阅StackBlitz repro。

这都是在嵌套选项卡组件的上下文中，其中 ag-grid 不在第一个选项卡上。我尝试在包含嵌套选项卡内容的 div 中使用 *ngIf：

<div *ngIf="hasBeenActive" [hidden]="!active"><ng-content></ng-content></div>

即使 DOM 显示 ag-grid 不存在，在选择第二个选项卡之前仍会调用 ag-grid 的 gridReady 事件。请参阅Stackblitz 重现。

Answer 1

1. 原始过于简化问题的解决方案：

<div *ngIf="hasBeenShown" style="width: 100%;" [hidden]="!grid2Showing">  
  <ag-grid-angular #agGrid2 style="width: 100%; height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions">
  </ag-grid-angular>
</div>

2. 实际问题的解决方案：ag-grid 在投影内容 (ng-content) 时命中 gridReady，在本例中是在嵌套选项卡组件中：

   a）（来自@antirealm的解决方案）在nested-tab组件上创建一个公开可用的“hasBeenActive”变量，然后在ag-grid上直接在*ngIf中使用它：

export class NestedTabComponent ... {
  ...
  public hasBeenActive: boolean = false;

  activate() {
    this.active = true;
    this.hasBeenActive = true; 
  }
  ....

<nested-tab title="Second grid" #myTab>
  <div style="width: 100%;">
    <ag-grid-angular *ngIf="myTab.hasBeenActive"
      ...>
    </ag-grid-angular>
  </div>    
</nested-tab>

     b) 修改嵌套选项卡组件以使用模板（如果存在），然后将不应立即初始化的任何嵌套选项卡的内容包装在模板中：

@Component({
    selector: 'nested-tab',
    template: `
    <div *ngIf="hasBeenActive" [hidden]="!active">
      <ng-container *ngTemplateOutlet="content"></ng-container>
      <ng-content></ng-content>
    </div>`
})
export class NestedTabComponent implements OnInit {
    @ContentChild(TemplateRef) content;
    ....

<nested-tab title="Second grid">
  <ng-template>
    <p>The Second grid rendered:</p>
    <div style="width: 100%;">      
      <ag-grid-angular ...></ag-grid-angular>
    </div>    
  </ng-template> 
</nested-tab>