CODEWITHSUNDEEP
javascriptangulartypescriptroutesangular-router-guards
Ben Saad
Ben Saad

Reputation: 21

Angular - Dynamic routing with router param vaiable

I want to do something like this in my routing.module.ts (see lines marked by-->)

export const routes: Routes = [
        path: 'test/:action',
        component: CreateComponent,
        --> canActivate: ':action' == 'read' ? [Guard1] : [Guard1, Guard2],
        data: {
        -->  screenAction: ':action' == 'read' ? 'read' : ':action',
        }
]

I have to use the variable :action because it is used later in the router param. Thanks for your help !

Upvotes: 2

Views: 4216

Answers (1)

Eldar
Eldar

Reputation: 10790

Well, what you ask is possible but implementing it might be a little complex.

First of all, you need to define multiple routes instead of 1. Where you can apply the conditions you require.

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: AppComponent },
  {
    path: 'dummy1/:action',
    component: Dummy1Component,
    canActivate: [GuardRotaterGuard],
  },
  {
    path: 'dummyx/:action',
    component: Dummy2Component,
    canActivate: [Guard1Guard],
  },
  {
    path: 'dummyz/:action',
    canActivate: [Guard1Guard, Guard2Guard],
    component: Dummy2Component,
  },
];

The route dummy1/:action is like a gateway route. Every request to dummy2 component should go from here. And then you need a decider/rotator guard that can decide and rotate the route depending on the route parameters. It should look like below :

canActivate(
    next: ActivatedRouteSnapshot,
    statex: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    const { action } = next.params;
    const state = { comesFrom: 'rotater' };
    console.log("rotater",action);
    if (action === 'read') { // you can decide whatever you want here
       this.router.navigate(['/dummyx/read'], { state });
    }else{
      this.router.navigate(['/dummyz', action], { state }); // pass the action to the other route as a parameter
    }

     return true;
  }

And here is a Stackblitz example in action.

Upvotes: 1

Related Questions