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

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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
12 февраля 2019 г. в Angular

Upload файла в Angular по клику кнопки

Создано простейшее nestjs приложение, принимающее файлы. Выбор и отправка файла по клику подразумевает, что на форме отсутствует input для файла. Отправка запроса осуществляется с отслеживанием прогресса.

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

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

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

Вложенные формы Angular

Рассматриваются варианты встраивания форм, позволяющие переиспользовать набор полей вводе со своей логикой. @Input() родительской формы, @Output() дочерней формы, ViewChild(), ControlValueAccessor, ControlContainer