Angular 18独立组件片段路由点击后组件不渲染问题求助

问题本质 #

你混淆了片段路由（锚点跳转）和常规路由的作用：

• 片段路由（/#xxx）仅用于跳转到当前页面内带id="xxx"的DOM元素，不会触发路由组件切换。
• 常规路由（/xxx）才是匹配路径并加载对应组件的逻辑。

当前配置中，点击routerLink="/" fragment="about"只会跳转到根路由（HomeComponent）下的锚点，但根路由并未加载AboutComponent，所以看不到内容；而访问/about时，路由匹配到对应配置，才会正常渲染组件。

解决方案分两种场景 #

场景1：需要加载AboutComponent组件 #

直接修改header里的About链接，去掉fragment，使用常规路由：

<!-- header.component.html 修改后 -->
<div id = "header">
    <div id = "home_bttn">
        <a routerLink = "/" fragment = "">Home</a>
    </div>   
    <div id = "sections">
        <!-- 直接指向about路由，无需fragment -->
        <a routerLink="/about">About</a>
    </div>
</div>

点击链接后路由会切换到/about，匹配routes.ts中的配置，正常渲染AboutComponent。

场景2：需要在HomeComponent内跳转到锚点位置（页面内滚动） #

如果需求是在Home页面内滚动到About区域而非切换组件，按以下步骤配置：

1. 在HomeComponent中添加锚点元素
   将About内容放在HomeComponent模板内，或引入AboutComponent作为子组件：

   <!-- home.component.html -->
   <div>Home内容</div>
   <!-- 锚点目标容器 -->
   <div id="about">
       <app-about></app-about>
   </div>
   

2. 配置路由锚点滚动行为
   在app.config.ts中设置路由滚动策略，确保Angular处理锚点跳转：

   import { ApplicationConfig } from '@angular/core';
   import { provideRouter, withInMemoryScrolling } from '@angular/router';
   import { routes } from './routes';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideRouter(routes, 
         withInMemoryScrolling({
           scrollPositionRestoration: 'top',
           anchorScrolling: 'enabled' // 启用锚点滚动
         })
       )
     ]
   };
   

3. 保留原fragment链接
   header中的链接无需修改，点击后会在Home页面内滚动到id="about"的位置。

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