angular routing multiple paths to same component

Question

Is there a way to optimize this code from this

{
  path: 'access-requests',
  canActivate: [AccessGuard],
  component: AccessRequestsComponent,
  children: [
    {
      path: '',
      redirectTo: 'today',
      pathMatch: 'full'
    },
    {
      path: 'today',
      component: AccessRequestsComponent
    },
    {
      path: 'tomorrow',
      component: AccessRequestsComponent
    },
    {
      path: 'expired',
      component: AccessRequestsComponent
    }
    ]
}

to something like this

{
  path: 'access-requests',
  canActivate: [AccessGuard],
  component: AccessRequestsComponent,
  children: [
    {
      path: '',
      redirectTo: 'today',
      pathMatch: 'full'
    },
    {
      path: 'today | tomorrow | expired',
      component: AccessRequestsComponent
    }
    ]
}

may be it is possible using regex

Salim Ibrohimi
– Salim Ibrohimi

2017-09-22 12:52:45 +00:00
Commented Sep 22, 2017 at 12:52 — Salim Ibrohimi
– Salim Ibrohimi, Commented Sep 22, 2017 at 12:52

Aniket kale · Accepted Answer · 2021-02-18 09:48:08Z

30

You can use the UrlMatcher property.

    {
      path: 'access-requests',
      canActivate: [AccessGuard],
      component: AccessRequestsComponent,
      children: [
        {
          path: '',
          redirectTo: 'today',
          pathMatch: 'full'
        },
        {
          matcher: matcherFunction,
          component: AccessRequestsComponent
        }
        ]
    }

And

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

Note: Untested code

edited Feb 18, 2021 at 9:48

Aniket kale

6772 gold badges8 silver badges25 bronze badges

answered Sep 22, 2017 at 13:23

CornelC

5,3091 gold badge23 silver badges28 bronze badges

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

3 Comments

edmundo096 Over a year ago

Yes, one could use something like this. We can see how the defaultUrlMatcher does a path match as an example.

danday74 Over a year ago

this is the correct answer, when you use this approach ... this.router.navigateByUrl does not try and reload the component when switching between the 2 (or more) paths

insertusernamehere Over a year ago

You could simplify the chain of || operators by using ['today', 'tomorrow'].some(p => path.startsWith(p)).

Bogdan D · Accepted Answer · 2020-07-03 17:02:43Z

30

You can use a mapped array:

children: [
  // excluding the other paths for brevity
  ...['today', 'tomorrow', 'expired'].map(path => ({
    path,
    component: AccessRequestsComponent
  }))
]

edited Jul 3, 2020 at 17:02

answered Jul 3, 2020 at 16:55

Bogdan D

5,6412 gold badges34 silver badges32 bronze badges

5 Comments

Dane Brouwer Over a year ago

I realize the above is probably better practice, but this seems more readable to me.

Bogdan D Over a year ago

@DaneBrouwer thanks for the feedback! Regarding the "better practice" part: although more generic, the approach with the url matcher is slower, more intricate and not necessary (as there's no upside in our case). I think K.I.S.S. is a great practice

Dane Brouwer Over a year ago

Honestly I didn't even think about the implications of using a custom url matcher - it just felt more Angular-like to me. However, I can't argue with K.I.S.S. or performance optimizations!

huysentruitw Over a year ago

Note that this method will cause Angular to reload the component when switching between the different paths, which might or might not be what you want.

Aniket kale Over a year ago

For me, It's showing the error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'split' of undefined TypeError: Cannot read property 'split' of undefined     at defaultUrlMatcher (router.js:525)

I'm using v9.

Aniket kale · Accepted Answer · 2021-03-19 08:58:18Z

Building on CornelC's answer, I wrote a method that accepts an array of string as paths and spits out a url matcher that will match an element of the array:

    export const routingMatcher: ((paths: string[]) => UrlMatcher) = (paths: string[]) => {
      const result: UrlMatcher = (segments) => {
        const matchingPathIndex = paths.findIndex((path, index) => {
          const pathSegments = path.split("/");
          return segments.every((segment, i) =>
            pathSegments.length > i && (
              pathSegments[i].startsWith(":") ? true : segment.path.toLowerCase() === pathSegments[i].toLowerCase()));
        });
    
        if (matchingPathIndex >= 0) {
          const matchingPath = paths[matchingPathIndex];
    
          const consumed: UrlSegment[] = [];
          const params = {};
    
          matchingPath.split("/").forEach((path, i) => {
            consumed.push(segments[i]);
            if (path.startsWith(":")) {
              const param = path.substring(1);
              params[param] = segments[i];
            }
          });
    
          return {
            consumed: consumed,
            posParams: params
          };
        }
    
        return null;
      };
    
      return result;
    };

You can use it like this in your routing definitions:

    children: [
      // excluding the other paths for brevity
        matcher:  routingMatcher(['today', 'tomorrow', 'expired'])
        component: AccessRequestsComponent
      }))
    ]

Collectives™ on Stack Overflow

angular routing multiple paths to same component

3 Answers 3

3 Comments

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Linked

Related