防止在Angular中的单个router.navigate调用上滚动到顶部

Posted 2023-02-22

【中文标题】防止在Angular中的单个router.navigate调用上滚动到顶部

【英文标题】：Prevent scroll to top on single router.navigate call in Angular

【发布时间】：2020-11-04 05:52:17

【问题描述】：

我的 Angular 8 应用在导航到新页面时会滚动到顶部。在一个特定页面上，我有一个可排序的表。导航到该页面时，它应该滚动到顶部，但是当单击表格标题单元格时，它应该使用排序更新查询参数，但不滚动到顶部。

是否可以使用新的查询参数数据调用router.navigate(...)，而不触发滚动到顶部，同时不禁用从路由本身滚动到顶部？

【参考方案1】：

您可以使用多个选项配置路由器模块。您应该能够使用 scrollPositionRestoration 选项保留滚动。

你可以像这样使用它：

RouterModule.forRoot(appRoutes,  scrollPositionRestoration: 'disabled' )

话虽如此，此选项将保留所有页面的滚动位置。

如果您只想为特定页面实现此目的，您可以选择在您的 navigate 调用中使用 navigationExtras 并在 state 对象中指定当前滚动位置，并在 AfterViewInit 处理程序更新滚动位置时。

假设您有一个包含表格的容器，您可以使用ViewChild 装饰器在组件文件中访问它。

// declare your container component
@ViewChild("container")
private container: ElementRef;

// after view init updated current scroll position
ngAfterViewInit() 
  const prevScrollPos = this.router.getCurrentNavigation()?.extras?.state?.scrollTop;
  if (prevScrollPos) 
    this.container.nativeElement.scrollTop = prevScrollPos;
  


// specify scroll position on navigation
this.router.navigate(
  ['/login'],
  
    state:  scrollTop: this.container.nativeElement.scrollTop 
  
);

【讨论】：

我没有时间测试它，因为项目转向了另一个方向；该灯箱分支将保持休眠状态至少一周。但是，您的解决方案似乎是合理的，虽然有点骇人听闻......实际上，角度似乎完全缺乏做得很好的能力。感谢您花时间和精力写出这么好的答案。