Блог

У меня есть пара маршрутов, как показано ниже. Моя основная/базовая маршрутизация приложений выглядит следующим образом:

 const routes: Routes = [{
    path: 'projects',
    loadChildren: () => import('../app/pages/pages.module').then(m => m.PagesModule)
}]
 

Маршрутизация PagesМодуля выглядит следующим образом:

 const routes: Routes = [
    {
        path: ':projectId/model', component: ModelComponent
    },
    {
        path: ':projectId/compare/:id', component: CompareComponent
    }
    {
        path: ':projectId/serving/:id', component: ServingComponent
    }
]
 

Для компонента модели указан правильный URL-адрес, а именно: localhost:4200/проекты/123/модель

С 123 as :ProjectID и 1 as :id я хочу, чтобы URL-адрес для ServingComponent и CompareComponent был таким: localhost:4200/проекты/123/обслуживание/1 localhost:4200/проекты/123/сравнение/1

Что работает: навигация по HTML работает так:

  <button [routerLink]="['../compare', model.id]">Compare</button>
 

Вопрос:
Когда я перехожу из своего файла TS, он не работает. Попробовал с помощью ниже:

  this.router.navigate(['../compare', model.id]);
 

Не могли бы вы, пожалуйста, подсказать, что может быть не так? Нужно ли мне изменять свои маршруты ? Интересно, почему навигация по TS не работает, в то время как навигация работает с HTML. Пожалуйста, посоветуйтесь.

Если вы хотите использовать относительный путь, вам нужно добавить relativeTo атрибут следующим образом: this.router.navigate(['../compare'], {relativeTo: this.activatedRoute}); (добавьте также model.id параметр)

Более подробная информация: https://angular.io/guide/router#specifying-a-relative-route