توجيه الأطفال المتداخل الزاوي وليس التوجيه

0

أحاول إنشاء توجيه للأطفال المتداخلين.

أول طريق رئيسي هو منع المستخدم من الوصول إلى أي شيء على التطبيق إذا لم يقم بتسجيل الدخول. هذا هو ما 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
    }
];

1 إجابة

1
افضل جواب

لقد كان سلوكًا غريبًا حقًا ، لذلك حاولت إعادة إنشاء المشكلة وجربت هذه البنية وقد نجحت. يجب أن يعمل هذا الهيكل ، ما لم يكن هناك شيء مكسور داخل حراسك:

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

في محاولتي ، لم يكن هناك حارس وكان الهيكل:

/
/admin
/admin/test

:مؤلف
فوق
قائمة طعام