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

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

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular

Angular Resolver

Resolver гарантированно получает асинхронные данные до создания компонента исходя из параметров маршрута.

Angular Let Directive

*ngIf не отображает содержимое в falsy случаях (0, null, undefined) на async pipe, в пакете @rx-angular/template предлагается решение