时间戳

首页 > 解决方案 > 角嵌套子路由不路由

angular - 角嵌套子路由不路由

问题描述

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

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

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

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

当我走这admin/users条路线并将其移到儿童街区之外时，它可以工作。该位置由我在下面代码中的注释指示。

我究竟做错了什么？我怎样才能让它工作？

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
    }
];

标签： angularangular-routing

解决方案

这真的是很奇怪的行为，所以我尝试重新创建问题并尝试了这种结构，它确实有效。这个结构应该可以工作，除非你的守卫内部有什么东西坏了：

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

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

//
admin
/admin/test

推荐阅读