路由 children 在 angular 8 中不起作用

Question

正在尝试解决路由 children 问题，但无法解决 it.If 我单击管理按钮不起作用，它不是管理员重定向 section.How 来解决此问题。

演示：https://stackblitz.com/edit/angular-3mngoh?file=src/app/approuting.module.ts

approuting.module.ts:

const routes: Routes = [ 
 {
 path: 'admin',
 component: AdminSectionComponent,
 children: [ 
 { path: '', loadChildren: () => import('./adminsection/layout/layout.module').then(m =>  m.LayoutModule) },
 { path: 'login', loadChildren: () => import('./adminsection/login/login.module').then(m => m.LoginModule) },
 { path: 'signup', loadChildren: () => import('./adminsection/signup/signup.module').then(m => m.SignupModule) },
 { path: 'error', loadChildren: () => import('./adminsection/server-error/server-error.module').then(m => m.ServerErrorModule) },
 { path: 'access-denied', loadChildren: () => import('./adminsection/access-denied/access-denied.module').then(m => m.AccessDeniedModule) },
 { path: 'not-found', loadChildren: () => import('./adminsection/not-found/not-found.module').then(m => m.NotFoundModule) },
 { path: '**', redirectTo: 'not-found' }

 ]
 },....etc

Answer 1

路由没有发生，因为从你的 UI 中点击管理员时出现矛盾，它正在寻找 /login 显示未找到并给出错误。所以在分析之后我发现在 AdminSection 的评论行-RoutingModule.ts 。这是你的代码路由数组，用下面的代码替换它。

您的代码：------------

  const routes: Routes = [
  {path:'',component:AdminSectionComponent,

  children:[

 { path: '', loadChildren: () => import('./layout/layout.module').then(m => m.LayoutModule), canActivate: [AuthGuard] },
    { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
    { path: 'signup', loadChildren: () => import('./signup/signup.module').then(m => m.SignupModule) },
    { path: 'error', loadChildren: () => import('./server-error/server-error.module').then(m => m.ServerErrorModule) },
    { path: 'access-denied', loadChildren: () => import('./access-denied/access-denied.module').then(m => m.AccessDeniedModule) },
    { path: 'not-found', loadChildren: () => import('./not-found/not-found.module').then(m => m.NotFoundModule) },
    { path: '**', redirectTo: 'not-found' }
  ]}

];

替换代码：--------

    const routes: Routes = [
  {path:'',component:AdminSectionComponent,

  children:[
    { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
    { path: 'signup', loadChildren: () => import('./signup/signup.module').then(m => m.SignupModule) },
    { path: 'error', loadChildren: () => import('./server-error/server-error.module').then(m => m.ServerErrorModule) },
    { path: 'access-denied', loadChildren: () => import('./access-denied/access-denied.module').then(m => m.AccessDeniedModule) },
    { path: 'not-found', loadChildren: () => import('./not-found/not-found.module').then(m => m.NotFoundModule) },
    { path: '**', redirectTo: 'not-found' }
  ]}

];

用 myy array routing 替换后你就会知道为什么 routing 没有发生

路由 children 在 angular 8 中不起作用

Routing children is not working in angular 8

typescript

angular6

angular8

angular7-router

您的代码：------------

替换代码：--------