角度组件渲染两次

Question

我创建了一个带有 spring-boot 后端和 Keycloak-Angular 16.0.1 auth 中间件的 Angular 18 客户端。问题是我登录并打开根 URL 后，app.component.html 的内容呈现了 2 倍。在页面 /doctor 或 /home 上一切都很好，但在 root 上我有两个菜单栏。

该html的内容是：

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

app-routing.module.ts 是这样的：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { KeycloakGuard } from './auth/keycloak.guard';
import {DoctorComponent} from './doctor/doctor.component';
import {HomeComponent} from './home/home.component';

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

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

DOM 通常在 Doctor 视图中：

该项目位于 github 上：https://github.com/pzoli/forras-ng-module 请帮我找到解决方案。感谢您的建议。

Answer 1

您当前的路由定义需要

router-outlet

中的

AppComponent

来渲染

AppComponent

...

尝试更改为：

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