CODEWITHSUNDEEP
angulartypescripturlroutesangular-router
infodev
infodev

Reputation: 5245

Angular router: ignore slashes in path parameters

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 ?

Upvotes: 6

Views: 7500

Answers (4)

Waseem Abbas
Waseem Abbas

Reputation: 41

For anyone still looking for this, if you have special characters in your param you use navigate method in following way:

this.router.navigate(['dashboard', param]);

This way Angular will automatically escape special characters in param

Upvotes: 3

Jota.Toledo
Jota.Toledo

Reputation: 28434

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

Upvotes: 11

Wannes Van Dorpe
Wannes Van Dorpe

Reputation: 854

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.

Upvotes: 7

Wisely D Cruizer
Wisely D Cruizer

Reputation: 1139

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

Upvotes: -2

Related Questions