Angular中如何实现返回表格页后滚动定位到点击的mat-row附近

核心实现思路 #

在路由跳转前记录当前点击行的位置标识，回到列表页时根据存储的标识滚动到对应位置即可解决该问题，具体实现步骤如下：

实现步骤 #

• 存储点击行的索引/唯一标识
  点击表格行跳转前，把当前点击行的索引值存入sessionStorage或者路由的state参数里，示例代码：

  // 行点击事件处理
  onRowClick(row: any, index: number) {
    // 存储点击行索引
    sessionStorage.setItem('lastClickedRowIndex', index.toString());
    // 路由跳转逻辑
    this.router.navigate(['/detail', row.id]);
  }
  

• 列表页初始化完成后触发滚动
  表格数据渲染完成后，读取存储的索引值，找到对应行的DOM节点，调用滚动方法定位：

  ngAfterViewInit() {
    // 等待表格数据渲染完成
    this.dataSource.renderedData$.pipe(take(1)).subscribe(() => {
      const lastIndex = sessionStorage.getItem('lastClickedRowIndex');
      if (lastIndex) {
        const rowEl = document.getElementsByTagName('mat-row')[Number(lastIndex)];
        if (rowEl) {
          // 滚动到对应行位置，可调整block参数修改对齐规则，也可自定义偏移量避免被顶部导航遮挡
          rowEl.scrollIntoView({behavior: 'smooth', block: 'start'});
        }
        // 用完立即清除存储值，避免下次进入列表页重复触发滚动
        sessionStorage.removeItem('lastClickedRowIndex');
      }
    })
  }
  

• 虚拟滚动场景兼容处理
  如果你使用了Angular Material的虚拟滚动表格<cdk-virtual-scroll-viewport>，需要替换滚动逻辑为调用虚拟滚动组件自带的scrollToIndex方法：

  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
  
  // 原滚动逻辑替换为下方代码即可
  this.viewport.scrollToIndex(Number(lastIndex), 'smooth');
  

注意事项 #

如果你的表格有分页、筛选、排序等动态改变数据的逻辑，需要额外存储当前分页页码、筛选条件、排序规则等参数，回到列表页时先还原表格数据状态，再执行滚动逻辑，避免存储的索引和实际渲染的行不匹配。
不推荐使用localStorage存储索引值，关闭浏览器后存储值还会残留，sessionStorage在标签页关闭后自动清除，更符合该场景的使用需求。

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