Как указать маршрутизацию для дочернего компонента дочернего компонента в angular?

Question

Это мой файл маршрутизации

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Purchase'
    },
    children: [    
      {
        path: 'list-vendor',
        component: VendorsListComponent,
        data: {
          title: 'List Vendors',
        },
        children: [    
          {
            path: 'create-vendor/:id',
            component: CreateVendorComponent,
            data: {
              title: 'Vendor'
            }
          }
        ]    
      }
    ]
  }
];

Здесь маршрутизация для CretateVendorComponent не работает, я получаю ошибку 404, но если я закомментирую маршрутизацию для внутренних дочерних элементов, маршрутизация для внешнего (VendorListComponent) работает отлично ... Как указать маршрутизацию для дочернего компонента дочернего компонента?

Answer 1

Вы можете поиграть с модулем маршрутизации.

app-routing.module.ts

 {
     path: 'list-vendor',
     loadChildren: '{PATH_TO_YOUR_MODULE}#{MODULE_NAME}'
 }

Vendors.module.ts

RouterModule.forChild([
    {
        path: '',
        component: VendorsListComponent
    },
    {
        path: 'create-vendor/:id',
        component: CreateVendorComponent
    }
]),

Answer 2

Текущий URL к CreateVendorComponent равен

/list-vendor/create-vendor/:id

Где :id должен быть заменен каким-либо параметром.

Какой URL вы используете?

This Путь строится из каждого последующего узла при прохождении по иерархии:

• path = ''
• VendorsListComponent - path = 'list-vendor'
• CreateVendorComponent - путь = 'create-vendor/:id'