带有空路径的角辅助路径答案

【问题标题】：Angular auxiliary route with an empty path on child带有空路径的角辅助路径
【发布时间】：2018-03-18 04:42:08
【问题描述】：

我正在尝试在空路径上使用辅助路线。例如：

  {
    path: 'users',
    children: [
      {
        path: '',
        component: UsersComponent,
      },
      {
        path: 'user-details',
        outlet: 'list',
        component: UserDetailsComponent
      },
    ]
  },

还有我的 UsersComponent 模板：

<router-outlet></router-outlet>
<router-outlet name="list"></router-outlet>

但是当我尝试导航到以下 URL 时： 1.http://localhost:4200/users(list:user-details) 2.http://localhost:4200/(users//list:user-details)

我收到此错误：

无法匹配任何路线。 URL 段：“用户”

【问题讨论】：

辅助路线

标签： javascript angular angular-router

【解决方案1】：

您收到该错误是因为您没有为您设置为第一条路线的“用户”加载组件。 'users' 路由应该像这样在你的主路由模块中定义

{ path: 'users', loadChildren: './users/user.module#UserModule' }

并且您当前的代码需要看起来像这样

const userRoutes: Routes = [
  {
    path: '', component: UsersComponent, children: [
      {
         path: 'user-details',
         outlet: 'list',
         component: UserDetailsComponent
      }
     ]
   }

这将使第一条路线成为“用户”

【讨论】：