Angular路由配置正确但新组件堆叠在首页下方加载问题求助

问题现象 #

开发Angular购物应用时，初始访问Homepage组件可正常渲染，但点击导航栏的About Us、Contact Us、Login、Register等路由链接时，目标组件会渲染在Homepage组件下方，无法替换Homepage组件从页面顶部展示。
项目目录结构参考：

项目app目录下设有MyComponents文件夹，内含homepage、login、register三个主组件，各主组件下嵌套对应子组件。

问题根因 #

配置存在3处核心错误：

• 根组件app.component.html中硬编码了<app-homepage></app-homepage>标签，该组件会被全局固定渲染，不会随路由切换消失；<router-outlet>仅会在固定渲染的Homepage下方额外输出路由匹配组件，完全不会替换Homepage内容
• 首页组件homepage.component.html中硬编码写入了AboutUs、ContactUs等独立路由页的组件标签，这类组件本应作为独立路由页面渲染，不属于首页固定展示区块
• 路由配置未设置根路径默认重定向规则，初始访问根路径时未匹配到任何路由规则，仅靠硬编码的Homepage标签实现首页展示

修复步骤 #

1. 修改根组件模板app.component.html #

删除硬编码的Homepage组件标签，仅保留全局需要常驻的公共组件和路由出口。如果需要所有页面统一显示顶部导航栏，可将Navbar组件放在全局位置，修改后代码如下：

<app-navbar></app-navbar>
<router-outlet></router-outlet>

如果不需要全局显示导航栏，仅保留<router-outlet></router-outlet>即可。

2. 修改首页组件模板homepage.component.html #

移除模板中硬编码的独立路由组件标签，仅保留首页本身需要展示的内容。如果Navbar已经挪到根组件全局渲染，也需要删除首页里的Navbar标签，修改后参考代码：

<!-- 若导航栏已全局渲染，删除下方<app-navbar>标签 -->
<app-workitems></app-workitems>
<!-- 删除硬编码的<app-about-us>、<app-contact-us>标签，二者为独立路由页，不属于首页子区块 -->

3. 完善路由配置app-routing.module.ts #

在路由数组最顶部添加根路径默认重定向规则，末尾可选添加通配符兜底路由，原配置中无实际使用场景的navbar路由可直接删除，修改后路由配置参考：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutUsComponent } from './MyComponents/homepage/about-us/about-us.component';
import { ContactUsComponent } from './MyComponents/homepage/contact-us/contact-us.component';
import { HomepageComponent } from './MyComponents/homepage/homepage.component';
import { LoginComponent } from './MyComponents/login/login.component';
import { OrdersComponent } from './MyComponents/login/orders/orders.component';
import { ProfileComponent } from './MyComponents/login/profile/profile.component';
import { WorkitemsComponent } from './MyComponents/login/workitems/workitems.component';
import { RegisterComponent } from './MyComponents/register/register.component';

const routes: Routes = [
  // 新增：根路径默认重定向到首页
  {
    path: "",
    pathMatch: "full",
    redirectTo: "homepage"
  },
  {
    path:"homepage",
    component: HomepageComponent
  },
  {
    path:"login",
    component: LoginComponent
  },
  {
    path:"register",
    component: RegisterComponent
  },
  {
    path:"aboutUs",
    component: AboutUsComponent
  },
  {
    path:"contactUs",
    component: ContactUsComponent
  },
  {
    path:"cart",
    component: LoginComponent
  },
  {
    path:"orders",
    component: OrdersComponent
  },
  {
    path:"profile",
    component: ProfileComponent
  },
  {
    path:"workitems",
    component: WorkitemsComponent
  },
  // 新增：通配符兜底，匹配不存在的路径跳转回首页
  {
    path: "**",
    redirectTo: "homepage"
  }
];

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

4. （可选优化）修正路由链接为绝对路径 #

为避免相对路径匹配异常，可将导航栏navbar.component.html中的routerLink属性值前添加/改为绝对路径写法，参考：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Shopping Application</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav" style="font-weight: bolder;">
        <li class="nav-item mx-5">
          <a class="nav-link" routerLink="/aboutUs">About the Owner</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/contactUs">Contact Us</a>
        </li>
      </ul>
      <div class="container-inline my-2 my-lg-0" style="margin-left: auto;  margin-right: 1rem;">
        <a class="btn btn-primary mx-2 my-2 my-sm-0" routerLink="/register" type="button">Sign Up</a>
        <a class="btn btn-success mx-2 my-2 my-sm-0" routerLink="/login" type="button">Login</a>
      </div>
    </div>
  </nav>

效果验证 #

修改完成后重新运行项目，路由切换逻辑将符合预期：

• 访问根路径时自动重定向到/homepage，<router-outlet>位置渲染Homepage组件
• 点击任意导航链接跳转路由时，Angular会销毁<router-outlet>中原有组件，渲染新匹配的目标组件，Homepage不会再固定显示在页面上方
• 所有路由页面统一从导航栏下方的页面顶部位置开始渲染

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