Angular动态异步加载页面如何通过路由正确滚动到指定锚点

核心思路 #

因为你的页面内容通过*ngIf="loaded"控制渲染，路由跳转时锚点元素还未挂载到DOM，原生的路由锚点滚动逻辑无法找到对应元素，所以需要先监听路由携带的锚点片段，等内容加载完成、DOM渲染完毕后再手动触发滚动。

具体实现步骤 #

步骤1：基础依赖注入 #

在目标组件中注入ActivatedRoute用于获取路由参数，可选注入ViewportScroller使用Angular官方提供的滚动工具：

import { ActivatedRoute } from '@angular/router';
import { ViewportScroller } from '@angular/common';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  // 你原有控制内容渲染的标记
  loaded = false;
  // 存储路由携带的锚点片段
  private targetAnchor: string | null = null;

  constructor(
    private route: ActivatedRoute,
    private viewportScroller: ViewportScroller
  ) {}
}

步骤2：监听路由锚点 + 内容加载后触发滚动 #

在ngOnInit中分别监听路由锚点变化、以及你的异步加载完成事件，时机匹配时触发滚动：

ngOnInit(): void {
  // 监听路由的锚点片段变化
  this.route.fragment.subscribe(fragment => {
    this.targetAnchor = fragment;
    // 如果内容已经加载完成，直接滚动
    if (this.loaded) {
      this.doScroll();
    }
  });

  // 替换为你原有异步加载数据的逻辑（比如接口请求）
  this.loadAsyncData().subscribe(() => {
    // 数据加载完成，允许内容渲染
    this.loaded = true;
    // 存在目标锚点时触发滚动
    if (this.targetAnchor) {
      // 加0延迟的setTimeout，等待*ngIf对应的DOM完全渲染完成
      setTimeout(() => this.doScroll(), 0);
    }
  });
}

// 滚动到目标锚点的方法
private doScroll(): void {
  if (!this.targetAnchor) return;
  // 方法1：使用Angular官方ViewportScroller
  this.viewportScroller.scrollToAnchor(this.targetAnchor);

  // 方法2：原生JS实现，可自定义滚动行为
  // const el = document.getElementById(this.targetAnchor);
  // if (el) {
  //   el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  // }
}

可选路由配置（辅助增强） #

如果是Angular 6及以上版本，可以在路由根配置中开启锚点滚动全局配置，作为常规场景的补充：

// app-routing.module.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // 开启锚点滚动
    anchorScrolling: 'enabled',
    // 导航时恢复滚动位置
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

注意：全局配置仅能处理DOM已经渲染完成的场景，异步加载的场景仍需要上述手动触发逻辑

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