Angular 6.0.3中router-outlet追加而非替换页面问题求助

我之前在Angular 6里踩过一模一样的坑！你遇到的点击routerLink后组件内容追加显示而非导航跳转的问题，90%的概率是根组件模板的路由出口配置错了，咱们一步步排查解决：

最常见的原因：根组件模板里手动写了目标组件标签 #

如果你的app.component.html里同时存在<app-home>/<app-settings>这类组件标签，以及<router-outlet>，就会出现这种情况：

• 初始重定向到/home时，router-outlet会渲染HomeComponent，但你手动写的<app-home>也会显示
• 点击settings链接时，router-outlet替换成SettingsComponent，但原来的HomeComponent（手动写的标签）还留在页面上，看起来就是“追加”了

修复方法： #

删掉app.component.html里所有手动写的业务组件标签，只保留<router-outlet>作为路由内容的唯一承载容器。比如：

错误模板（会导致追加）：

<!-- 手动写的组件标签会一直显示 -->
<app-home></app-home>
<router-outlet></router-outlet>

正确模板：

<!-- 导航栏可以保留，路由内容完全由router-outlet控制 -->
<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/settings">Settings</a>
</nav>
<!-- 唯一的路由出口 -->
<router-outlet></router-outlet>

其他排查点 #

如果上面的方法没用，再检查这两个地方：

• 确认路由模块正确导入：确保AppRoutingModule（包含RouterModule.forRoot(routes)）已经导入到AppModule的imports数组里，你的路由配置代码本身是没问题的
• 检查<base href>：打开index.html，确认<head>里有<base href="/">——Angular CLI默认会生成这个，但如果手动删除会导致路由路径解析错误

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