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

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

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

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

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

Об subscribe() vs async

О предпочтительности использования async pipe. При OnPush стратегии не требуется вызывать markForCheck() внутри подписки +решение с несколькими | async pipes развёрнутых в одну переменную (внутри шаблона).

05 января 2019 г. в Angular

Angular & MVVM

  • Model - just file like user.class.ts
  • View - HTML template of component
  • ViewModel - Typescript part of a component
14 апреля 2019 г. в Angular

Вставить <script> в Angular компонент

Добавление сторонних скриптов в Angular по запросу. Как известно, добавить скрипт через шаблон невозможно. Представлено решение как это сделать программно.

15 ноября 2019 г. в Angular