Angular 18根路径AppComponent重复渲染两次问题求助

问题原因 #

你的路由配置犯了Angular里的典型错误：AppComponent是项目的根组件，它已经通过index.html中的<app-root>标签被默认渲染到页面中。而你在路由规则里又把根路径''指向了AppComponent，这就导致：

• 第一次渲染：根组件本身的内容（包含<app-navbar>和<router-outlet>）
• 第二次渲染：路由在<router-outlet>内部再次加载AppComponent，重复渲染了<app-navbar>和新的<router-outlet>

这就是访问根路径时出现两个导航栏的根本原因，而访问/home或/doctors时，路由加载的是对应组件，不会重复渲染根组件内容，所以显示正常。

修复方案 #

修改app-routing.module.ts中的路由配置，将根路径的路由改为重定向到/home，或者直接指向HomeComponent，同时保留守卫：

方案1：重定向到/home #

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full', canActivate: [KeycloakGuard] },
  { path: 'home', component: HomeComponent },
  { path: 'doctors', component: DoctorComponent },
];

方案2：直接将根路径指向HomeComponent #

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [KeycloakGuard] },
  { path: 'home', component: HomeComponent },
  { path: 'doctors', component: DoctorComponent },
];

方案1的重定向更简洁规范，避免重复定义HomeComponent路由。修改后，访问根路径时，路由会直接加载HomeComponent到根组件的<router-outlet>中，不会再重复渲染AppComponent，导航栏就只会显示一次了。

内容的提问来源于stack exchange，提问作者Papp Zoltán