Angular应用导航栏重复渲染问题求助

问题场景 #

开发Angular应用时，访问/home路由时，导航栏组件会重复显示，出现两个导航栏，调整router-outlet位置和组件引用方式后仍未解决。

相关代码 #

路由配置 #

import {Routes} from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {AdminComponent} from "./admin/admin.component";

export const routes: Routes = [
  {path: 'home', title: 'Home', component: HomeComponent},
  {path: 'admin', title: 'Admin', component: AdminComponent},
  {path: '**', redirectTo: 'home'},
];

app.module.ts #

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {NavbarComponent} from "./navbar/navbar.component";
import {AdminComponent} from "./admin/admin.component";
import {RouterLink, RouterModule, RouterOutlet} from "@angular/router";

@NgModule({
  declarations: [AdminComponent, NavbarComponent],
  imports: [CommonModule, RouterLink, RouterOutlet, RouterModule],
  exports: [AdminComponent, NavbarComponent, CommonModule, RouterLink, RouterOutlet, RouterModule]
})
export class AppModule {
}

index.html #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ui</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-home></app-home>
<router-outlet></router-outlet>
</body>
</html>

home.component.html #

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

navbar.component.html #

<nav>
  <ul>
    <li><a routerLink="/home" >Home</a></li>
    <li><a routerLink="/news">News</a></li>
    <li><a routerLink="/contact">Contact</a></li>
    <li><a routerLink="/about">About</a></li>
    <li><a routerLink="/admin">Admin</a></li>
  </ul>
</nav>

问题原因 #

1. index.html直接渲染<app-home>：应用启动时，index.html里的<app-home>会先渲染一次Home组件，而路由匹配/home时又会再渲染一次Home组件，导致Home组件被加载两次，其中的导航栏自然重复显示。
2. Home组件内多余的router-outlet：当前路由结构没有子路由需求，Home组件内的router-outlet属于冗余配置，会干扰路由渲染逻辑。

解决步骤 #

1. 修改index.html，移除直接引用的<app-home> #

保留根路由出口即可，让路由系统负责渲染页面组件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ui</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<router-outlet></router-outlet>
</body>
</html>

2. 清理Home组件内的冗余router-outlet #

如果Home组件不需要承载子路由，删除内部的router-outlet：

<app-navbar></app-navbar>
<!-- 此处添加Home页面的具体内容 -->

3. 优化全局导航结构（推荐） #

如果希望导航栏在所有页面显示，建议创建根组件（如AppComponent）统一承载导航栏和路由出口，避免重复配置：

• 创建app.component.html：

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

• 调整路由配置为嵌套结构：

import {Routes} from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {AdminComponent} from "./admin/admin.component";
import {AppComponent} from "./app/app.component";

export const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {path: 'home', title: 'Home', component: HomeComponent},
      {path: 'admin', title: 'Admin', component: AdminComponent},
      {path: '**', redirectTo: 'home'},
    ]
  },
];

这样导航栏仅在根组件渲染一次，所有子路由页面共享该导航栏，彻底解决重复问题。

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