Angular 7路由无法跳转新页面，组件叠加显示问题求助

你遇到的问题根源很明确：你在app.component.html里直接硬编码了<app-home></app-home>，这会导致Home组件无论路由怎么切换都会一直固定渲染在页面上，而router-outlet又会加载匹配到的路由组件（比如About），最终就出现了两个组件同时显示的情况。

下面是具体的修复步骤：

1. 修正根组件模板（app.component.html） #

移除直接声明的<app-home></app-home>，只保留router-outlet来负责渲染路由匹配的组件，同时修正导航项的routerLink（你之前所有项都指向/about，这明显是复制粘贴失误）：

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="/home">
    <img class="navBarLogo" src="../../assets/whitelogo.png">
  </a>
  <div class="navItemList">
    <a class="navbar navItem" routerLink="/home">Home</a>
    <a class="navbar navItem" routerLink="/about">About</a>
    <a class="navbar navItem" routerLink="/scheduling">Scheduling</a>
    <a class="navbar navItem" routerLink="/services">Services</a>
  </div>
</nav>
<router-outlet></router-outlet>

2. 完善路由配置（app-routing.module.ts） #

添加默认路由规则，确保用户访问根路径时自动跳转到Home页面，同时清理不必要的依赖导入：

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

// 预留后续要创建的组件路由位置
const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' }, // 根路径默认重定向到Home
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'scheduling', component: /* 后续替换为你的Scheduling组件 */ },
  { path: 'services', component: /* 后续替换为你的Services组件 */ },
  { path: '**', redirectTo: '/home' } // 处理无效路由，重定向到Home
];

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

提示：你的路由模块不需要导入CommonModule，RouterModule.forRoot()已经包含了必要依赖，所以可以移除import { CommonModule } from '@angular/common';这一行。

原理说明 #

Angular的router-outlet是路由组件的专属占位符，当你切换路由时，Angular会自动把匹配到的组件渲染到router-outlet的位置，替换掉之前的组件。而你之前直接在模板里写<app-home>，相当于把它作为固定内容一直显示，和路由组件并存，这就是两个组件同时出现的核心原因。

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