Búsqueda de sitios web

javascript - Angular - Enrutamiento dinámico con variable de parámetro de enrutador


Quiero hacer algo como esto en mi routing.module.ts (ver las líneas marcadas por -->)

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

Tengo que usar la variable :action porque se utiliza más adelante en el parámetro del enrutador. ¡Gracias por tu ayuda!

Respuesta #1

Bueno, lo que pides es posible, pero implementarlo podría ser un poco complejo.

En primer lugar, necesitas definir múltiples rutas en lugar de una. Donde puedes aplicar las condiciones que requieres.

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,
  },
];

La ruta dummy1/:action es como una ruta de acceso. Cada solicitud al componente dummy2 debería pasar por aquí. Y luego necesitas un guardián decidor/rotador que pueda decidir y rotar la ruta dependiendo de los parámetros de la ruta. Debe verse como sigue:

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

Y aquí hay un ejemplo de Stackblitz en acción.