Angular. Маршрут c 2 опциональными параметрами

Требуется создать маршрутизируемый компонент, который будет работать на маршруте с 2 опциональными параметрами mainId и secondaryId

/{mainId}
/{mainId}/{secondaryId}

Для одиночного опционального параметра есть возможность использовать встроенные возможности маршрутизации

const routes = [
  { 
    path: '/user', 
    component: UserComponent 
  },
  { 
    path: '/user/:id', 
    component: UserComponent 
  },
];

В случае 2 и более опциональных параметров можно/нужно воспользоваться Angular URL Matcher


import { Routes, UrlMatchResult, UrlSegment } from '@angular/router';

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        // соответствует маршруту
        // path: ':mainId/:secondaryId',
        matcher: (segments): UrlMatchResult | null => ({
          // позиционные параметры
          posParams: {
            mainId: new UrlSegment(segments[0]?.path ?? '', {}),
            secondaryId: new UrlSegment(segments[1]?.path ?? '', {}),
          },
          // 2 сегмента помещены в posParams, в дочерние компоненты
          // они не отправляются, чтобы сымитировать встроенное поведение
          consumed: segments.slice(0, 2),
        }),
        component: MainComponent,
        children: [
          {
            path: 'create',
            component: ChildComponent,
          },
        ],
      },
    ],
  },
];

Похожие записи

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.