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 ?

What you can do is to get the 2 parts of the parameter in different variables, something like dashboard/:param1/:param2' in your state, and recompose it afterwards using param1 + '/' + param2. A workaround in a way, but it should work — Kaddath
– Kaddath, Commented May 18, 2018 at 9:05

Jota.Toledo · Accepted Answer · 2018-05-18 10:09:08Z

11

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

answered May 18, 2018 at 10:09

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

infodev Over a year ago

I have discovered the UrlMatcher thanks to you, Nawsen response solved the issue and in my case it's simpler than UrlMatcher

Evgeni Nabokov Over a year ago

It was hard to find really useful example how to map a parameter with slashes.Thank you a lot.

Arno Teigseth Over a year ago

LOVE IT! Just 2 heads up for use: the customMatcher is hardcoded, modify 1) the path === "dashboard" to your application, and also 2) the parameter name in return(… { id: - I had used path/:tool instead of path/:id so had to rename to tool: idSegment

Wannes Van Dorpe · Accepted Answer · 2018-05-18 09:26:45Z

7

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.

answered May 18, 2018 at 9:26

Wannes Van Dorpe

8546 silver badges17 bronze badges

1 Comment

infodev Over a year ago

That's solved the issue, Angular parse well the param and transform automatically %2F to /

Waseem Abbas · Accepted Answer · 2020-10-09 06:53:54Z

3

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

answered Oct 9, 2020 at 6:53

Waseem Abbas

412 bronze badges

Comments

Wisely D Cruizer · Accepted Answer · 2018-05-18 09:14:55Z

-2

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

answered May 18, 2018 at 9:14

Wisely D Cruizer

1,18412 silver badges27 bronze badges

2 Comments

Jota.Toledo Over a year ago

A possible solution, but a poor one. Handling the recomposition of the id parameter in the same component is extra logic that you havent included.

Wisely D Cruizer Over a year ago

the question was to identify the route path. So i gave the appropriate answer. The use Of ActivatedRoute to get the parameter value is extra logic, but i haven't included it since its not relevant to the question.

Collectives™ on Stack Overflow

Angular router: ignore slashes in path parameters

4 Answers 4

3 Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related