Angular 36: Parámetros de Ruta y Guards
easy⏱ 5 mincourseangular
Rutas parametrizadas: :id captura un segmento de la URL
{ path: 'user/:id', component: UserComponent } coincide con cualquier URL como /user/42 o /user/abc, y el router extrae lo que haya aparecido en ese segmento como un parámetro de ruta llamado id.
export const routes: Routes = [
{ path: 'user/:id', component: UserComponent },
];
Leyendo parámetros: snapshot vs. el paramMap reactivo
inject(ActivatedRoute).snapshot.paramMap.get('id') lee el id una sola vez, en el momento en que se crea el componente — está bien si el componente siempre se destruye y se vuelve a crear en cada navegación. Si el router podría reutilizar la misma instancia del componente mientras solo cambia el :id (navegando de /user/1 a /user/2 sin salir de la ruta), suscríbete en cambio al observable reactivo inject(ActivatedRoute).paramMap para capturar cada actualización.
private route = inject(ActivatedRoute);
userId = this.route.snapshot.paramMap.get('id');
// or, reactively:
// this.route.paramMap.subscribe(params => {
// this.userId = params.get('id');
// });
CanActivateFn: una función simple que controla el acceso a la navegación
Un guard de ruta es simplemente una función que coincide con la firma CanActivateFn — puede hacer inject() de cualquier servicio que necesite (un servicio de auth, el propio Router), y retorna true para permitir que la navegación continúe, false para bloquearla silenciosamente, o un UrlTree (de inject(Router).createUrlTree([...])) para redirigir a otro lugar. Se adjunta a una ruta con canActivate: [authGuard].
export const authGuard: CanActivateFn = () => {
const auth = inject(AuthService);
const router = inject(Router);
if (auth.isLoggedIn()) return true;
return router.createUrlTree(['/login']);
};