Angular - 仅在一条路线上滚动位置恢复

发布于 2025-01-11 01:14:01 字数 409 浏览 0 评论 0原文

我想在一页上禁用scrollPositionRestoration。假设我的 app-routing.module.ts 文件中有以下路由...

const appRoutes: Routes = [{ path: 'home', component: myComponent}, { path: 'about', component: myComponent}, ]

并且我的导入如下...

@NgModule({imports: [RouterModule.forRoot(appRoutes, {
    scrollPositionRestoration: 'enabled'
})]

如何禁用“about”路由上的 scollPositionRestoration？

原文

I want to disable scrollPositionRestoration on one page. Let's say I have the following routes in my app-routing.module.ts file...

const appRoutes: Routes = [{ path: 'home', component: myComponent}, { path: 'about', component: myComponent}, ]

and I have my imports as follows...

@NgModule({imports: [RouterModule.forRoot(appRoutes, {
    scrollPositionRestoration: 'enabled'
})]

How would I disable the scollPositionRestoration on the 'about' route?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Oo萌小芽oO 2025-01-18 01:14:01

不要使用： scrollPositionRestoration: 'enabled'

重置回：

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

然后仅在 home.component.ts 中使用它：

scrollTop() {
    window.scroll(0, 0);
  }

然后添加 (click)="scrollTop()"你想在哪里执行它。

Do not use: scrollPositionRestoration: 'enabled'

Reset back to:

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

Then use this in your home.component.ts only:

scrollTop() {
    window.scroll(0, 0);
  }

Then add (click)="scrollTop()" where you want to execute it.

回复收藏 0 原文

翻身的咸鱼 2025-01-18 01:14:01

您无法在不同的路由中以不同的方式控制 scrollPositionRestoration 值。此选项仅适用于根模块。因此，在您的情况下，您应该从根模块中删除它（默认情况下 scrollPositionRestoration 值为 'disabled'），并且可以通过 Router 控制滚动的位置 和 ViewportScroller。
在 app.component 中，您可以监听这样的导航事件：

this.router.events.subscribe((e) => {
  if (e instanceof NavigationEnd) {
    // if (..) You can write any logic for moving the scroll to the top or not
    this.viewport.scrollToPosition([0, 0]);
  }
});

You could not control scrollPositionRestoration value differently in different routes. This option for root module only. As a result, In your case you should remove it from root module (by default scrollPositionRestoration value is 'disabled') and can control the position of scroll by Router and ViewportScroller.
In the app.component You can listen navigation events like this:

this.router.events.subscribe((e) => {
  if (e instanceof NavigationEnd) {
    // if (..) You can write any logic for moving the scroll to the top or not
    this.viewport.scrollToPosition([0, 0]);
  }
});

回复收藏 0 原文

~没有更多了~