Angular导航后如何让Router-Outlet内的AG-Grid获取焦点？

点击App Component菜单按钮完成导航后，位于Router-Outlet子组件内的AG-Grid无法自动获取焦点。资料显示导航后焦点会自动回到菜单按钮，尝试多种方案均无效，需实现导航后将焦点设置到AG-Grid上。

已尝试的无效方案 #

• 在AG-Grid的OnCellClicked中执行列可见性设置：

  var firstCol = params.columnApi.getAllDisplayedColumns()[0];
  params.api.ensureColumnVisible(firstCol);
  

• 通过ViewChildren引用AG-Grid并尝试聚焦：
  组件模板代码：

  <ag-grid-angular #agGrid 
          style="height: 740px; width: 100%;"
          class="ag-theme-balham"
          multiSortKey="ctrl"
          rowSelection="single"
          rowModelType="serverSide"
          [modules]="modules"
          [columnDefs]="columnDefs"
          [defaultColDef]="defaultColDef"
          [rowData]="rowDataServerSide"
          [animateRows]="true"
          [getRowHeight]="getRowHeight"
          [ensureDomOrder]="true"
          [suppressColumnVirtualisation]="true"
          [pagination]="true"
          (modelUpdated)="onModelUpdated($event)"
          [paginationPageSize]="paginationPageSize"
          (firstDataRendered)="onFirstDataRendered($event)"
          [enableCellChangeFlash]="true"
          (gridReady)="onGridReady($event)"
          (cellClicked)="onCellClicked($event)"
          (cellKeyPress)="onCellKeyPress($event)"
          [enableBrowserTooltips]="true"
          [statusBar]="statusBar"
          [frameworkComponents]="frameworkComponents"
          (cellFocused)="onCellFocused($event)"
          (cellKeyDown)="onCellKeyDown($event)"
          [tabToNextCell]="onTabToNextCell"
          [navigateToNextCell]="onNavigateToNextCell">
        </ag-grid-angular>
  

  组件类代码：

  @ViewChildren('agGrid')
  public agGrid: any;
  this.agGrid.first._nativeElement.focus();
  

• 通过HTML属性禁用按钮的[autofocus]

菜单相关代码（App Component模板） #

<mat-sidenav-container *ngIf="!centurionPreview" class="sidenav-container">
<mat-sidenav #drawer class="sideNav" fixedInViewport *ngIf="(isHandset$ | async)"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false"
    (click)="toggleSidenav()">
    <mat-toolbar>Menu</mat-toolbar>
<mat-nav-list #sideMenu class="side_menu">
      <button 
        [disabled]="!navPerms.Library.functional"
        [hidden]="!navPerms.Library.enabled"
        [matMenuTriggerFor]="library"
        mat-button>Library</button>
      <mat-menu #library="matMenu">
        <button *ngFor="let item of navPerms.Library.children"
          [attr.aria-label]="getName(item.id) + 'Button'"
          [hidden]="!item.functional || !item.enabled"
          [disabled]="!item.functional || !item.enabled"
          (click)="goToEntityPage(item.id)"
          mat-menu-item>{{getName(item.id)}}
        </button>
      </mat-menu>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar>
      <button type="button" (click)="toggleSidenav()"
        *ngIf="currentUser && (isHandset$ | async)">
        <mat-icon aria-label="Side Navigation Toggle Icon">Menu</mat-icon>
      </button>
      <div *ngIf="currentUser && !(isHandset$ | async)">
        <button
          [disabled]="!navPerms.Library.functional"
          [hidden]="!navPerms.Library.enabled"
          [matMenuTriggerFor]="libraryMenu"
          mat-button>Library</button>
        <mat-menu #libraryMenu="matMenu">
          <button *ngFor="let item of navPerms.Library.children"
            [attr.aria-label]="getName(item.id) + 'Button'"
            [hidden]="!item.functional || !item.enabled"
            [disabled]="!item.functional || !item.enabled"
            (click)="goToEntityPage(item.id)"
            mat-menu-item>{{getName(item.id)}}
          </button>
        </mat-menu>
 </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>
<!-- Add Content Here -->
<div #mainContent style="height:88%;width:100%">
  <router-outlet></router-outlet>
</div>

解决方法 #

方法1：阻止菜单按钮回收焦点（关键前提） #

Angular Material菜单默认在关闭后会将焦点返回触发按钮，这是焦点无法落到AG-Grid的核心原因之一。在所有mat-menu标签上添加[focusOnClose]="false"属性，关闭这一行为：

<mat-menu #library="matMenu" [focusOnClose]="false">
  <!-- 菜单内容 -->
</mat-menu>
<mat-menu #libraryMenu="matMenu" [focusOnClose]="false">
  <!-- 菜单内容 -->
</mat-menu>

方法2：子组件内通过AG-Grid API设置焦点 #

在AG-Grid所在的子组件中，利用AfterViewInit钩子结合AG-Grid原生API，确保组件渲染完成后设置焦点：

import { AfterViewInit } from '@angular/core';

export class YourGridComponent implements AfterViewInit {
  private gridApi: any;
  private columnApi: any;

  onGridReady(params: any) {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
  }

  ngAfterViewInit() {
    // 延迟执行，确保AG-Grid数据和DOM完全渲染
    setTimeout(() => {
      if (this.gridApi) {
        // 获取第一个可见行和列
        const firstRowNode = this.gridApi.getDisplayedRowAtIndex(0);
        const firstCol = this.columnApi.getAllDisplayedColumns()[0];
        
        if (firstRowNode && firstCol) {
          // 设置焦点到目标单元格
          this.gridApi.setFocusedCell(firstRowNode.rowIndex, firstCol.colId);
          // 可选：直接进入单元格编辑状态
          this.gridApi.startEditingCell({
            rowIndex: firstRowNode.rowIndex,
            colKey: firstCol.colId
          });
        }
        // 聚焦到AG-Grid容器本身
        const gridContainer = document.querySelector('.ag-theme-balham');
        if (gridContainer) gridContainer.focus();
      }
    }, 200); // 延迟时间可根据实际渲染速度调整
  }
}

方法3：父组件监听路由事件触发焦点设置 #

在包含Router-Outlet的App Component中，监听路由导航完成事件，统一触发AG-Grid的焦点设置：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { ViewChild, ElementRef } from '@angular/core';

export class AppComponent {
  @ViewChild('mainContent') mainContent: ElementRef;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      setTimeout(() => {
        // 先将焦点移到主内容区，避免焦点残留到菜单
        this.mainContent.nativeElement.focus();
        // 再通过AG-Grid API设置单元格焦点（需确保能获取到gridApi，可通过共享服务传递）
        // 示例：假设通过共享服务存储了gridApi
        // if (this.gridService.gridApi) { ... }
      }, 150);
    });
  }
}

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