How to match route only if param is integer in Angular2?

Question

For example this router

{
    path: \'/client\',
    component: ClientRootComponent,
    children: [
        {path: \'\', component: ClientListComponent},
               


        

Answer 1

You can pass a custom matcher to your route

import { defaultUrlMatcher } from '@angular/router/src/shared';

function digitsMatcher(segments: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route): UrlMatchResult | null {
  const result = defaultUrlMatcher(segments, segmentGroup, route);

  if (!result || !result.consumed || result.consumed.length < 1) {
    return;
  }

  const re = /^\d+$/;
  const match = re.exec(result.consumed[0].path);

  if (match) {
    return result;
  }

  return null;
}

{
    path: '/client',
    component: ClientRootComponent,
    children: [
        {path: '', component: ClientListComponent},
        {path: ':clientId', component: ClientOpenComponent, resolve: makeResolver(ClientOpenResolver), matcher: digitsMatcher}
    ]
},
{
    path: '**',
    component: NotFoundComponent
}

The code is not tested

See also

• https://github.com/angular/angular/blob/73407351e7fa75250be8bdb6c1eb4f7d37f6f947/modules/%40angular/router/src/shared.ts#L39
• https://angular.io/docs/ts/latest/api/router/index/Routes-type-alias.html
• https://angular.io/docs/ts/latest/api/router/UrlMatcher