Angular嵌套children路由不路由

Question

我正在尝试创建一些嵌套的 children 路由。

第一个 parent 路由是为了防止用户在未登录的情况下访问应用程序上的任何内容。这就是 AuthGuardService 的用途。

然后我有一个管理组件，只有当用户是管理员时才能访问。它有 children 也需要受到 AdminGuardService.

的保护

除了 users 路线外，所有这些路线似乎都有效。当我去 admin/users 时什么也没有发生。它不导航，也不给我错误。它只是位于您所在的页面上。我希望它通过 adminguard 运行然后路由到 users 页面。

当我走 admin/users 路线并将其移到 children 街区之外时，它会起作用。该位置由我在下面的代码中的注释指示。

我做错了什么？我如何让它工作？

const routes: Routes = [
    {
        path: "",
        component: BaseComponent,
        canActivate: [AuthGuardService],
        children: [
            {path: "", redirectTo: "/boards", pathMatch: "full"},
            {path: "boards", component: BoardsComponent},
            {
                path: "admin",
                component: AdminComponent,
                canActivate: [AdminGuardService],
                children: [
                    {
                        path: "",
                        children: [
                            {path: "users", component: AdminUsersComponent}
                        ]
                    }
                ]
            },
            // {path: "admin/users", component: AdminUsersComponent}
        ]
    },
    {
        path: "login",
        component: LoginComponent
    }
];

这也不行。

const routes: Routes = [
    {
        path: "admin",
        component: AdminComponent,
        children: [
            { path: "users", component: AdminUsersComponent },
        ]
    }
]

这可行，但不是我想要的...

const routes: Routes = [
    {
        path: "",
        component: BaseComponent,
        canActivate: [AuthGuardService],
        children: [
            {path: "", redirectTo: "/boards", pathMatch: "full"},
            {path: "boards", component: BoardsComponent},
            {
                path: "admin",
                component: AdminComponent,
                canActivate: [AdminGuardService]
            },
            {
                path: "admin/users",
                component: AdminUsersComponent,
                canActivate: [AdminGuardService]
            }
        ]
    },
    {
        path: "login",
        component: LoginComponent
    }
];

Answer 1

这真的很奇怪，所以我尝试重新创建问题并尝试了这个结构，它确实有效。这个结构应该可以工作，除非它在你的守卫内部被破坏了：

   {
    path: "admin",
    canActivate: [AdminGuardService],
    children: [
      {
        path: "",
        component: AdminComponent
      },
      {
        path: "users",
        component: AdminUsersComponent
      }
    ]
  },

在我的尝试中，没有守卫，结构是：

/
/admin
/admin/test

Angular嵌套children路由不路由

Angular nested children routing not routing

angular-routing

angular