如何在Angular主组件内配置子路由实现页面内滚动

你的问题核心是：用子路由切换URL但组件已提前渲染在Home中，路由切换不会触发页面滚动。以下是直接可行的修改方案：

1. 给滚动目标区域添加ID #

修改home.component.html，给每个需要滚动到的区块添加唯一ID，对应导航的锚点：

<div class="intro" id="home">
  <div class="bg"></div>
  <div class="introduction">
    <div class="intro-box">
      <span class="intro-title"> some title </span>
      <br>
      <span class="intro-subtitle">some subtitle</span>
      <p class="intro-paragraph">
        some paragraph
      </p>
    </div>
  </div>
</div>
<div class="about-section" id="about">
    <app-about></app-about>
</div>
<div class="experience-section" id="experience">
    <app-experience></app-experience>
</div>

2. 修改导航链接为锚点路由 #

修改header.component.html，把routerLink指向根路径，并通过fragment指定滚动目标ID（同时修正你代码里多写的f字符）：

<mat-toolbar class="toolbar" color="primary">
    <div>
      <button (click)="onToggleSidenav()" mat-icon-button>
        <mat-icon>menu</mat-icon>
      </button>
    </div>
    <div><a routerLink="/" fragment="home">home</a></div>
    <div>
      <ul class="navigation-items">
        <li><a routerLink="/" fragment="about">About</a></li>
        <li><a routerLink="/" fragment="experience">Experience</a></li>
      </ul>
    </div>
</mat-toolbar>

3. 调整路由配置并开启滚动恢复 #

修改routing.module.ts，删除不必要的子路由（组件已直接渲染，无需路由加载），同时开启Angular的滚动位置恢复功能：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, ExtraOptions } from '@angular/router';
import { HomeComponent } from './home/home.component';

// 配置滚动行为
const routerOptions: ExtraOptions = {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  scrollOffset: [0, 64], // 可选：如果顶部工具栏固定，设置偏移量避免内容被遮挡
};

const routes: Routes = [
  { path: '', component: HomeComponent },
  // 删除原有的子路由配置
];

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

4. 可选：添加平滑滚动效果 #

在全局CSS文件（如styles.css）中添加以下样式，让滚动过渡更自然：

html {
  scroll-behavior: smooth;
}

原方案失效原因 #

你之前的子路由配置是让Angular通过router-outlet动态加载组件，但你的HomeComponent里已经直接写了<app-about>和<app-experience>，路由切换时只会修改URL，不会触发页面滚动——因为组件已存在于DOM中，路由没有触发任何滚动逻辑。

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