Angular5路由跳转时组件追加而非替换的问题求助

我一眼就看出问题出在哪了——你的路由配置犯了个典型的新手错误：把根组件AppComponent设置成了/home路径的目标组件！

你想啊，AppComponent本身就是整个应用的根容器，里面已经包含了导航栏和<router-outlet>。当你点击/home的链接时，Angular会把AppComponent再渲染一次到它自己的<router-outlet>里，这就导致原来的AppComponent内容（导航+空的router-outlet）还留在页面上，新的AppComponent又被追加到了router-outlet的位置，看起来所有内容就都堆在底部了。

下面是具体的修复步骤，跟着做就能解决问题：

1. 创建独立的首页组件 #

首先你需要一个专门的HomeComponent来承载首页内容，别复用根组件。用Angular CLI可以快速生成：

ng generate component home

如果不用CLI，就手动创建home.component.ts、home.component.html等文件，把原来AppComponent里属于首页的具体内容（如果有的话）移到这个新组件的模板里。

2. 修改路由配置 #

更新app.module.ts里的路由数组，把/home对应的组件换成刚创建的HomeComponent，同时建议添加默认路由，让用户访问根路径时自动跳转到首页：

const appRoutes: Routes = [ 
  {path: 'home', component: HomeComponent}, 
  {path: 'articles', component: ArticlesComponent}, 
  {path: 'portfolio', component: PortfolioComponent}, 
  {path: 'about', component: AboutComponent}, 
  {path: 'contact', component: ContactComponent},
  {path: '', redirectTo: '/home', pathMatch: 'full'} // 默认路由跳转
];

别忘了在@NgModule的declarations数组里添加HomeComponent，不然Angular找不到这个组件。

3. 清理AppComponent的结构 #

确保AppComponent的模板只保留导航链接和<router-outlet>，不要包含任何首页的具体内容，这样所有路由组件都会渲染到这个<router-outlet>的位置，实现内容替换：

<a routerLink="/home">HOME</a> 
<a routerLink="/articles">ARTICLES</a> 
<a routerLink="/portfolio">PORTFOLIO</a> 
<a routerLink="/about">ABOUT</a> 
<a routerLink="/contact">CONTACT</a> 

<router-outlet></router-outlet>

做完这些修改后再点击导航链接试试，你会发现对应的组件会正确替换<router-outlet>的内容，而不是追加在页面底部了。

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