Angular 5（Chrome）页面跳转问题求助：阻止ngFor表格自动跳转

嘿，这个问题我之前在Angular项目里也碰到过类似的，大概率是Angular的变更检测机制或者DOM渲染时的默认行为搞的鬼，给你几个针对性的解决思路：

• 指定ngFor的trackBy函数
  这是最常见的诱因：如果没给*ngFor设置trackBy，Angular在数组新增元素时会重新渲染整个列表，浏览器可能会自动滚动到新插入的DOM元素位置。添加trackBy能优化渲染逻辑，避免不必要的DOM操作：

  // 组件类中定义trackBy函数
  trackByItemId(index: number, item: any): number {
    // 优先用元素的唯一标识，没有的话用index兜底
    return item.id || index;
  }
  

  模板中对应修改：

  <table>
    <tr *ngFor="let item of dataList; trackBy: trackByItemId">
      <!-- 表格内容 -->
    </tr>
  </table>
  

• 手动保存并恢复滚动位置
  在执行添加元素操作前，先记录当前页面的滚动位置，等DOM更新完成后再恢复到原位置。注意要放在setTimeout里确保DOM已经渲染完毕：

  addNewItem() {
    // 保存当前滚动位置
    const currentScroll = window.scrollY;
    // 向数组添加新元素
    this.dataList.push(newItem);
    // 等待DOM更新后恢复滚动
    setTimeout(() => {
      window.scrollTo(0, currentScroll);
    }, 0);
  }
  

• 检查表格组件的自动滚动逻辑
  如果是自定义表格组件，排查内部有没有调用scrollIntoView()或者修改scrollTop的代码——有些开发者会为了让用户看到新增行主动加这类逻辑。如果是第三方表格组件，去翻官方文档看有没有关闭自动滚动的配置项，比如autoScrollToNewRow这类开关。

• 控制变更检测时机
  有时候Angular的变更检测时机可能导致滚动异常，可以手动分离变更检测器，完成元素添加后再触发检测，最后恢复滚动：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  addItem() {
    const scrollPosition = window.scrollY;
    // 分离变更检测器
    this.cdr.detach();
    // 添加新元素
    this.dataList.push(newItem);
    // 手动触发变更检测
    this.cdr.detectChanges();
    // 恢复滚动位置
    window.scrollTo(0, scrollPosition);
    // 重新连接变更检测器
    this.cdr.reattach();
  }
  

• 排查Chrome的自动聚焦行为
  Chrome有时候会自动聚焦到新增的可交互元素（比如表格行里的输入框、按钮），这也会导致页面滚动。你可以给这类元素加autofocus="false"属性，或者在元素渲染后手动取消聚焦：

  // 假设新增行的元素有模板引用变量#newInput
  @ViewChild('newInput') newInput: ElementRef;
  
  addItem() {
    this.dataList.push(newItem);
    setTimeout(() => {
      this.newInput.nativeElement.blur();
    }, 0);
  }
  

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