子路径为空的角度辅助路线

Question

I'm trying to use the auxiliary route on an empty path. For example:

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

And my UsersComponent template:

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

But when I'm trying to navigate to the following URLs: 1. http://localhost:4200/users(list:user-details) 2. http://localhost:4200/(users//list:user-details)

I'm getting this error:

Cannot match any routes. URL Segment: 'users'

Answer 1

You are getting that error because you have no component loading for 'users' which you set as your first route. the 'users' route should be defined in your main routing module like this

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

and your current code needs to look like this

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

and that will make the firs route 'users'