Angular URL Matcher

Если имеется несколько маршрутов для одного компонента:

const routes = [
    {
      path: '',
      redirectTo: 'today',
      pathMatch: 'full'
    },
    {
      path: 'today',
      component: SomeComponent
    },
    {
      path: 'tomorrow',
      component: SomeComponent
    },
    {
      path: 'expired',
      component: SomeComponent
    }
];

Или маршруты с опциональными параметрами

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

То такую или более сложную логику можно объединить используя UrlMatcher:

function matcherFunction(url: UrlSegment[]) {
    if (url.length == 1) {
        const path = url[0].path;
         if(path.startsWith('today') 
           || path.startsWith('tomorrow') 
           || path.startsWith('expired')){
          return {consumed: url};
        }
    }
    return null;
}

const routes = [
    {
      path: '',
      redirectTo: 'today',
      pathMatch: 'full'
    },
    {
      matcher: matcherFunction,
      component: SomeComponent
    }
]

Официальный пример:

function htmlFiles(url: UrlSegment[]) {
  return url.length === 1 && url[0].path.endsWith('.html') ? ({consumed: url}) : null;
}

const routes = [{ matcher: htmlFiles, component: AnyComponent }];

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

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

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

Angular dependency injection

Определение Provider (useClass, useValue, useFactory ), Injector. Декоратор @Inject, ключ multi: true

13 ноября 2018 г. в Angular

Angular. Functions & getters в шаблонах

На каждый цикл механизма обнаружения изменений выполняется метод из шаблона. Если этого надо избежать, то следует использовать pure pipe или результат выполнения присвоить свойству компонента