gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 02:51:54 27 4
gpt4 key购买 nike

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

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

最佳答案

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

你可以像这样使用它:

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

话虽这么说,这个选项将保留所有页面的滚动位置。

如果您只想为特定页面实现此目的,您可以选择使用 navigationExtras在您的 navigate 调用中并在 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 }
}
);

关于angular - 防止在 Angular 中的单个 router.navigate 调用上滚动到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62902888/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com