ActivatedRoute неправильно отслеживается для многоуровневой навигации

Question

Я использую router.navigate в моем приложении, и не похоже, что ActivatedRoute отслеживает правильно. Сначала я лениво загружаю исходный модуль из app-routing.module :

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'plan-configuration',
    loadChildren: () =>
      import('./plan-configuration/plan-configuration.module').then(
        p => p.PlanConfigurationModule
      )
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

А затем вот маршруты в этом модуле:

const routes: Routes = [
  {
    path: '',
    component: PlanConfigurationComponent,
    children: [
      {
        path: 'fsa',
        component: RaFsaComponent,
        children: [
          {
            path: '',
            redirectTo: 'client-profile',
            pathMatch: 'full'
          },
          {
            path: 'client-profile',
            component: ClientProfileComponent
          }
        ]
      },
      {
        path: 'hsa',
        component: HsaComponent
      },
      {
        path: '',
        redirectTo: 'hsa',
        pathMatch: 'full'
      }
    ]
  }
];

Вот код маршрутизации в моем NavigationMenuComponent :

this.router
  .navigate([this.categorySelected.code], {
    relativeTo: this.route
  });

Я вставляю ActivatedRoute в конструктор моего NavigationMenuComponent :

constructor(
 private route: ActivatedRoute,
 private router: Router,
 service: NavigationService
) {
  this.menuItems = service.getMenuItems();
}

И вот мое дерево компонентов:

Когда я нажимаю, чтобы загрузить PlanConfigurationModule , URL-адрес правильно становится следующим:

http://localhost:4200/plan-configuration/hsa

Затем я нажимаю на ссылку fsa , и URL-адрес корректно становится следующим:

http://localhost:4200/plan-configuration/fsa

Но когда я пытаюсь нажать на fsa child Я получаю сообщение об ошибке, которое не может соответствовать ни одному из маршрутов для этого:

plan-configuration/client-profile

Почему это не URL?

plan-configuration/fsa/client-profile

Я маршрутизирую относительно на активированный маршрут. Когда я сижу на этой странице:

http://localhost:4200/plan-configuration/fsa

... не должен ли активированный маршрут включать часть fsa ? Я, наверное, просто неправильно понимаю, как это работает. Любые советы с благодарностью.

Answer 1

Человек, я тоже не все понимаю, но давайте начнем работать над вашей ленивой нагрузкой.

это создаст ВАШУ конфигурацию / план

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'plan-configuration',loadChildren: './plan-configuration/plan-configuration.module#PlanConfigurationModule'
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

на модуле конфигурации плана будет таким

const routes: Routes = [
  {
         path: 'fsa',
        component: RaFsaComponent
      },
      {
        path: 'hsa',
        component: HsaComponent
      },
      {
        path: 'client-profile',
        component: ClientProfileComponent
      }
];

ВАШИ URL-адреса БУДУТ ЭТО

YOURl / план-конфигурация / FSA

---

YOURl / план-конфигурация / hsa

---

YOURurl / план-конфигурации / клиент-профиль

---

, если вы хотите лениво загрузить клиентский профиль и если вам нужен этот URL YOURur / план-конфигурация / FSA / client-profile , вам потребуется 2 новых модуля, один для FSA и один client-profile.

И старый модуль конфигурации плана будет выглядеть так

 const routes: Routes = [
          {
             path: 'fsa',
            loadChildren: './thePATHforIt/fsa.module#FsaModule'
          },
          {
            path: 'hsa',
            component: HsaComponent
          }
        
      
    ];

и 2 модуля новостей будут такими:

1 # FSA

 const routes: Routes = [
      {
             path: '',
            component: FsaComponent
          },
      {
        path: 'client-profile',
            loadChildren: './thePATHforIt/client-profile.module#ClientProfileModule'
      }
    ];

2 # client-profile

 const routes: Routes = [
          {
                 path: 'client-profile',
                component: ClientProfileComponent
              }
        ];