Angular中如何基于路由查询参数条件隐藏ag-grid列？

方案1：通过ag-grid Column API动态修改列显隐 #

无需改动原有colDefs数组，直接利用网格API控制列的显示状态，适配大量网格场景：

1. 模板中添加网格引用与gridReady事件绑定：

<ag-grid-angular
  #agGrid
  [colDefs]="colDefs"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  <!-- 其他网格配置 -->
></ag-grid-angular>

2. 组件类中保存columnApi实例，在参数获取后更新列状态：

private columnApi: ColumnApi;
private queryParams: any;

onGridReady(params: GridReadyEvent) {
  this.columnApi = params.columnApi;
  // 若参数已提前获取，直接执行更新
  this.updateColumnVisibility();
}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.queryParams = params;
    this.updateColumnVisibility();
  });
}

private updateColumnVisibility() {
  if (!this.columnApi) return;
  
  // 示例：根据type参数控制目标列显隐
  const isCreditType = this.queryParams?.type === 'credit';
  this.columnApi.setColumnVisible('targetColumnId', !isCreditType);

  // 批量控制多列可使用setColumnsVisible
  // this.columnApi.setColumnsVisible(['colA', 'colB'], !isCreditType);
}

此方案仅需给网格添加事件绑定与统一的更新方法，对现有2000+网格的侵入性极低。

方案2：延迟网格初始化至参数加载完成 #

通过*ngIf控制网格渲染时机，确保参数获取后再初始化列配置：

1. 组件类中添加参数加载状态标记：

paramsLoaded = false;
queryParams: any;

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.queryParams = params;
    // 提前修改colDefs的visible属性（如果需要）
    this.colDefs.find(col => col.field === 'targetField').visible = params.type !== 'credit';
    this.paramsLoaded = true;
  });
}

2. 模板中用*ngIf延迟网格渲染：

<ag-grid-angular
  *ngIf="paramsLoaded"
  [colDefs]="colDefs"
  [rowData]="rowData"
  <!-- 其他网格配置 -->
></ag-grid-angular>

该方案让网格初始化时直接使用已配置好显隐状态的colDefs，无需后续API调整。

方案3：给列的visible属性绑定动态逻辑（适用于少量列） #

对需要控制的列，直接在colDefs中定义动态visible属性，配合变更检测触发更新：

queryParams: any;

colDefs = [
  { field: 'id', visible: true },
  { 
    field: 'targetField',
    // 动态返回显隐状态
    get visible() {
      return this.queryParams?.type !== 'credit';
    }
  },
  // 其他列定义
];

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.queryParams = params;
    // 重新赋值触发Angular变更检测，让网格识别属性变化
    this.colDefs = [...this.colDefs];
  });
}

此方案适合仅需调整少数列的场景，无需额外API操作。

内容的提问来源于stack exchange，提问作者PSP2912