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

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

@Attribute() декоратор

Аналогично @Input() позволяет получить значение атрибута с хоста компонента/директивы, но не отслеживает дальнейшее изменение атрибута.

14 сентября 2019 г. в Angular

Angular. Когда не надо отписываться в RxJS?

В async pipe за вас отпишется Angular. Во всех остальных случаях лучше отписываться самостоятельно. Допускается не отписываться в потоках, где будет гарантировано вызван complete.

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

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

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

Angular. Отличие baseHref от deployUrl

  • deployUrl - задаёт путь для статических (js, css) файлов в index.html.
  • baseHref - определяет base, используется в ссылках и маршрутизации (routing) Angular