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

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

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Angular & MVVM

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

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

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

13 сентября 2020 г. в Angular