Angular 17.1.0中withInMemoryScrolling({scrollPositionRestoration:'top'})不生效求助

你配置的全局滚动恢复未生效，可尝试以下几种解决方案：

• 检查单个路由的滚动配置
  部分路由可能单独设置了scrollPositionRestoration属性，会覆盖全局配置。排查你的appRoutes定义，若存在类似以下的路由配置，需移除或统一设置为'top'：

  const appRoutes: Routes = [
    { path: 'target-path', component: TargetComponent, scrollPositionRestoration: 'enabled' }
  ];
  

• 手动监听路由事件强制滚动
  若全局配置因页面布局（如固定定位头部、异步加载内容导致DOM延迟更新）失效，可在根组件中手动监听路由导航结束事件，强制滚动到顶部：

  import { Router, NavigationEnd } from '@angular/router';
  import { filter } from 'rxjs';
  
  constructor(private router: Router) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      window.scrollTo(0, 0);
      // 若使用自定义滚动容器，替换为对应元素的滚动操作
      // document.querySelector('.custom-scroll-container')?.scrollTo(0, 0);
    });
  }
  

• 验证路由配置加载状态
  启用路由追踪功能，查看控制台日志确认滚动配置是否正确生效：

  bootstrapApplication(AppComponent, {
    providers: [
      provideRouter(appRoutes,
        withInMemoryScrolling({ scrollPositionRestoration: 'top' }),
        withRouterConfig({ enableTracing: true })
      ),
    ],
  });
  

  打开浏览器控制台，搜索Scroll相关日志条目，确认是否触发了滚动到顶部的逻辑。

• 处理延迟加载组件的滚动问题
  若路由对应组件为延迟加载，可能因组件加载完成前滚动已执行导致失效。可在延迟加载组件的ngAfterViewInit钩子中补充滚动操作：

  import { Component, AfterViewInit } from '@angular/core';
  
  @Component({...})
  export class LazyLoadedComponent implements AfterViewInit {
    ngAfterViewInit(): void {
      window.scrollTo(0, 0);
    }
  }
  

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