嵌套路由器无限循环Angular

Question

我正在尝试做一个带有标题、菜单和内容 div 的简单页面 当有人单击菜单的锚点时，我希望内容 div 填充与关联的路由对应的页面。 而且，现在，我只想让这个公共页面（标题、菜单和内容）匹配任何路线。

appComponent 只是在这里路由到其他组件：

app-component.html

<router-outlet></router-outlet>

包含标题、菜单和内容的组件称为 LayoutComponent ：

layout-component.html

<div>
    <app-menu></app-menu>
    <router-outlet></router-outlet>
</div>

我的路由配置如下：

export const routes: Routes = [
  {
    path: 'login',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'common',
    loadChildren: 'app/dsia-common/dsia-common.module'
  },
  {
   path: 'home',
   redirectTo: '',
   pathMatch: 'full'
  },
  {
   path: '',
   component: LayoutComponent,
   children: [
  {
    path: '**',
    pathMatch: 'full',
    canActivate: [AuthGuardService],
    component: GenericPageComponent
  }
]

在我的网站上浏览时，在 localhost:4200/,

我期待弹出一个登录页面（AuthGuardService 将我重定向到登录路径）。 成功登录后，登录组件将重定向到主页。 并且主页应该使用 LayoutComponent 来显示标题、菜单和嵌套路由器插座中的内容。 它应该对每个 url 都这样做。 所以总结一下

/ -> (trigger) canActivate[AuthGuardService] --> (redirect to) /login --> (on success redirect to) /home --> (redirect to) / --> LayoutComponent

不幸的是，我的页面没有加载，因为登录页面被递归调用（总是调用导航取消事件）。我认为这是由于 AuthGuardService 在调用 /login 路径时使用（因此登录路由被取消并被重定向到登录路由，等等......） .根据我的理解应该是这样的。

有人可以指出我在这里显然缺少什么吗？

非常感谢。

问候。 本杰明

Answer 1

您将登录重定向到登录。有无限循环是正常的。尝试更改您的路由配置。这是一个示例。

export const routes: Routes = [
{
  path: '',
  redirectTo: 'login',
  pathMatch: 'full'
},
{
  path: 'login',
  component: LoginComponent,
}
]