Angular router: ignore slashes in path parameters

Question

I have dynamic routes that could contain slashes or anti-slashes inside parameters , for example:

http://localhost:4200/dashboard/T64/27D I should navigate to a page with route T64/27D

Here's how I navigate this.router.navigate(['dashboard/'+this.groupListPage[0].code]); this.groupList[0].code contain T64/27D

Actually Angular separate T64 and 27D as 2 different pages.

Here's the error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/T64/27D'
Error: Cannot match any routes. URL Segment: 'dashboard/T64/27D'

How can I tell to Angular that / is a part of the param ?

Answer 1

I don't think it is possible to do this with pathparams. It would perfectly work with queryparams tho.

You can also try to escape the slash with %2F, but I am not 100% sure how angular will take/parse this.

Answer 2

Assumming the route:

{
    path: 'dashboard/:id',
    component: FooComponent
 }

And :id can exist in {'abc','ab/c'}, in order to consider the inner '/' as part of the path, you need to use a custom UrlMatcher:

const customMatcher: UrlMatcher = (
  segments: UrlSegment[],
  group: UrlSegmentGroup,
  route: Route
): UrlMatchResult => {
  const { length } = segments;
  const firstSegment = segments[0];
  if (firstSegment.path === "dashboard" && length === 2 || length === 3) {
    // candidate for match
    const idSegments = segments
      .slice(1); // skip prefix
    const idPaths = idSegments.map(segment => segment.path);
    const mergedId = idPaths.join('/');// merge the splitted Id back together
    const idSegment: UrlSegment = new UrlSegment(mergedId, { id: mergedId });
    return ({ consumed: segments, posParams: { id: idSegment } });
  }
  return null;
};

A working example can be found in this blitz

Answer 3

  You must define it in your routes.
  //if two param
  {
    path: 'dashboard/:id1/:id2',
    component: yourComponent
  }
  //if only one param
 {
     path: 'dashboard/:id1',
     component: yourComponent
 }
 {
     path: 'dashboard',
     component: yourComponent
 }
 and then navigate to your path
 this.router.navigate(['dashboard/'+this.groupListPage[0].code]);