Angular路由问题：跳转其他组件时app.component.html内容未隐藏

这个问题我碰到好多次了，本质是你没理清Angular路由的渲染逻辑～你的app.component.html里应该同时放了初始首页内容和<router-outlet>标签，当路由跳转时，<router-outlet>会渲染目标组件，但App组件本身的内容并不会自动隐藏，所以就出现了两个内容同时显示的情况。

下面是具体的解决步骤，跟着做就能搞定：

1. 把初始内容抽成独立的Home组件 #

首先，我们需要把App组件里的初始展示内容（就是你一开始想加载的首页内容）移到一个单独的组件里，比如HomeComponent。用Angular CLI快速创建：

ng generate component home
# 或者简写：ng g c home

创建完成后，把app.component.html里的所有初始内容（除了导航菜单这类公共元素）全部剪切到home.component.html里。

2. 改造App组件的模板结构 #

现在app.component.html只需要保留公共的导航菜单和路由出口<router-outlet>，这样路由切换时，只有<router-outlet>的位置会动态替换内容，公共导航会一直保留。示例代码：

<!-- 公共导航菜单 -->
<nav>
  <a routerLink="/">首页</a>
  <a routerLink="/about">关于我们</a>
  <a routerLink="/contact">联系我们</a>
</nav>

<!-- 路由出口：这里会根据当前路由渲染对应的组件 -->
<router-outlet></router-outlet>

3. 配置路由规则 #

打开app-routing.module.ts，更新路由配置，让默认路由指向HomeComponent，其他路由对应各自的组件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的组件
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // 默认路由加载Home组件
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  // 可选：添加404重定向路由
  { path: '**', redirectTo: '' }
];

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

这样配置后，当你打开应用时，默认路由''会让<router-outlet>渲染HomeComponent，显示你原来的初始内容；当点击“联系我们”跳转到/contact时，<router-outlet>会自动替换成ContactComponent的内容，App组件的导航菜单依然保留，再也不会出现内容叠加的问题啦！

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