Angular 17路由导航后无法滚动至指定锚点问题及解决

场景与配置细节 #

路由链接组件 #

某组件通过routerLink和fragment属性生成带锚点的路由链接：

<span
    [routerLink]="deltaLink() ? '../../' + deltaLink() : null"
    [fragment]="'header-' + headerText()"
    [@fadeInOut] class="material-symbols-outlined delta-found">
    sync_problem
</span>

锚点目标组件 #

目标页面组件通过[attr.id]动态生成锚点元素：

<div class="rounded-container">
  <div class="header" [attr.id]="'header-' + headerText()">
    <p>{{headerText()}}</p>
  </div>
</div>

路由配置尝试 #

已在RouterModule.forRoot中开启锚点滚动相关配置，但未生效：

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

后续尝试在provideRouter中配置（错误地将配置断言为RouteReuseStrategy），同样无效：

bootstrapApplication(
  AppComponent,
  {
    providers: [
    provideRouter(APP_ROUTES,
      {
        scrollPositionRestoration: 'enabled',
        anchorScrolling: 'enabled' 
      } as RouteReuseStrategy), // 此处类型断言错误，导致配置失效
    provideHttpClient(withFetch()),
    provideAnimationsAsync(),
    provideAnimations(),
    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
],
  }
).catch((err) =>
  console.error(err),
);

问题现象 #

路由可正常跳转到目标页面，但Angular原生的锚点滚动功能未触发，页面不会自动滚动到指定的id元素位置。

临时解决方案 #

在目标组件的ngAfterContentInit钩子中添加延迟执行的手动滚动逻辑，问题得到解决：

ngAfterContentInit(): void {
  // 延迟执行锚点滚动，等待DOM完全渲染
  setTimeout(() => {
    this.activatedRoute.fragment.subscribe(fragment => {
      console.log(fragment)
      if (fragment) {
        const element = document.getElementById(fragment);
        console.log('Found element:', element);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
        }
      }
    });
  }, 1000);
}

更优雅的替代方案 #

固定延迟（1秒）不够灵活，可通过监听路由NavigationEnd事件，在导航完成后再执行滚动，避免依赖硬编码的延迟时间：

import { Router, NavigationEnd } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { filter, take } from 'rxjs/operators';

// ...

constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

ngAfterViewInit(): void {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    take(1) // 仅处理当前导航的滚动逻辑
  ).subscribe(() => {
    this.activatedRoute.fragment.subscribe(fragment => {
      if (fragment) {
        const element = document.getElementById(fragment);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      }
    });
  });
}

问题根源分析 #

Angular原生的锚点滚动会在路由导航完成后立即执行，但如果锚点元素是动态生成（依赖异步数据或组件渲染周期）的，此时DOM中还不存在目标元素，导致滚动失效。手动延迟或监听导航完成后再执行滚动，能确保目标元素已被渲染到DOM中。

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