Angular - несколько маршрутов для компонента с дочерними элементами?

#angular #typescript

Вопрос:

Я пытаюсь создать несколько угловых маршрутов для дочернего компонента, и я должен использовать отложенную загрузку (loadChildren).

/страница 1/из1 -> MyComponent
/страница 2/from2 -> MyComponent
/страница 1 / from2 -> нет совпадения
/страница 2/из1 -> нет совпадения

Как мы можем видеть, /page1/from1 и /page2/from2 должны показывать show MyComponent , но /page1/from2 не должны перенаправлять на MyComponent .

Вот что я пробовал:

Маршрутизация приложения:

 const routes: Routes = [
   { path: 'page1', loadChildren: () => import(`./MyComponentModule.module`).then(x => x.MyComponentModule) },
   { path: 'page2', loadChildren: () => import(`./MyComponentModule.module`).then(x => x.MyComponentModule) }
];

Маршрутизация модуля компонента:

 const routes: Routes = [
   { path: 'from1', component: MyComponentModule }, 
   { path: 'from2', component: MyComponentModule }
];

Проблема с этим решением

Это соответствует /page1/from2, а также /page2/from1, что мне не нужно. Есть ли элегантный способ сделать это?

1. если у нас есть страница 3, мы должны просто показать форму 3?

2. @ArashHatami Нет, у меня есть множество подобных страниц с конкретными именами, но это всего лишь примеры имен. Я не хочу использовать какое-либо сопоставление подстановочных знаков

3. Вы не можете использовать параметр маршрутизатора?

4. Я не понимаю, как я мог бы это сделать, не нарушая отложенную загрузку:- (

5. для каждой страницы вы загружаете определенный модуль?

Ответ №1:

Вы можете использовать параметры маршрутизатора

 const routes: Routes = [
   { path: 'page/:id', loadChildren: () => import(`./MyComponentModule.module`).then(x => x.MyComponentModule) },
];

 const routes: Routes = [
   { path: 'from/:id', component: MyComponentModule }, 
];