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,
          },
        ],
      },
    ],
  },
];

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

ngx translate attribute

Используется конструкция

<img src="image.jpg" [alt]="'KEY' | translate"> 
19 августа 2018 г. в Angular

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

09 октября 2018 г. в Angular

Angular routerLink conditionally

<a [routerLink]="myVar ? '/home' : null" routerLinkActive="is-active">Home</a>
or
<a [routerLink]="myVar ? ['/home'] : []">Home</a>