首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当用angular 11导航回到上一页时,如何保持滚动到的位置?

在使用Angular 11导航回到上一页时,要保持滚动到的位置,你可以使用ScrollPositionRestoration选项来实现。

首先,在你的路由模块中,确保导入RouterModuleRoutes,然后设置你的路由配置。在RouterModule.forRoot()方法中,将scrollPositionRestoration设置为enabled,这样就可以启用滚动位置的恢复。示例如下:

代码语言:txt
复制
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Scroll } from '@angular/router';

const routes: Routes = [
  // 路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

接下来,在你的组件中,如果你需要导航回上一页,并保持滚动位置不变,可以使用Location服务的back方法结合Scroll服务来实现。在组件中导入LocationScroll

代码语言:txt
复制
import { Location } from '@angular/common';
import { Scroll } from '@angular/router';

@Component({
  // 组件配置...
})
export class YourComponent {

  constructor(private location: Location, private scroll: Scroll) { }

  goBack() {
    this.location.back();
    this.scroll.scrollToPosition([window.scrollX, window.scrollY]);
  }
}

goBack方法中,调用location.back()方法来导航回上一页,然后使用scroll.scrollToPosition()方法将滚动位置设置为之前的位置。

这样,当你使用goBack方法导航回上一页时,滚动位置就会得到保持。

希望这些信息能够帮助到你!如果你有任何其他问题,欢迎继续提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券