Angular Router

Las rutas son un array de tipo Routes, normalmente en app.routes.ts: cada objeto asocia un path (sin barra inicial) a un component. Ese array se registra en app.config.ts con provideRouter(routes). El router compara la URL con las rutas en orden y usa la primera que coincide.

El componente de la ruta activa se pinta dentro de <router-outlet />, que suele estar en la plantilla del componente raíz (importando RouterOutlet), entre una cabecera y un pie que no cambian. Si das un title a cada ruta, el router también actualiza el título de la pestaña.

Con un <a href> normal, el navegador pediría una página nueva al servidor. Con la directiva routerLink, el router intercepta el clic y cambia de vista sin recargar: <a routerLink="/productos">. Para rutas con partes variables, pasa un array: [routerLink]="['/productos', p.id]"; para parámetros de consulta, añade [queryParams].

routerLinkActive="activo" añade esa clase CSS al enlace mientras su ruta está activa, lo que sirve para resaltar la sección actual del menú. Las dos directivas se importan en el componente: RouterLink y RouterLinkActive.

Un parámetro de ruta se declara con dos puntos en el path (productos/:id) y forma parte de la dirección: identifica qué se muestra. Un parámetro de consulta (query param) va tras el ? (/productos?orden=precio&pagina=2) y suele indicar cómo se muestra: filtros, orden, página. Los dos llegan siempre como texto.

El servicio ActivatedRoute da acceso a la ruta activa: paramMap y queryParamMap son Observables que emiten cada vez que cambian, y snapshot ofrece los valores de ese instante. Si el usuario pasa de /productos/1 a /productos/2, Angular reutiliza el mismo componente y solo cambian los parámetros, así que el snapshot leído al principio se queda viejo.

Con provideRouter(routes, withComponentInputBinding()), el router asigna a los inputs del componente de la ruta los valores con el mismo nombre: parámetros de ruta, parámetros de consulta, data de la ruta y resultados de resolvers. Si la ruta es productos/:id, basta con declarar id = input<string>().

El código queda más corto y el componente no sabe nada del router, así que puedes reutilizarlo o probarlo pasándole el input a mano. Como el input es una señal, derivas valores con computed() y se recalculan solos cuando cambia la URL.

Con children, una ruta contiene otras: cuenta puede tener cuenta/perfil y cuenta/pedidos. El componente padre se pinta en el outlet principal y tiene en su plantilla otro <router-outlet />, donde aparece el hijo activo. Así el menú lateral de la sección se mantiene mientras cambia el contenido.

Las rutas hijas escriben su path relativo al padre (perfil, no cuenta/perfil). Una hija con path: '' es la que se muestra cuando la URL es exactamente la del padre.

Una ruta con redirectTo no pinta nada: envía a otra dirección. Con pathMatch: 'full' solo redirige si la URL coincide entera; es obligatorio al redirigir desde path: '', porque una cadena vacía es el principio de cualquier URL. También sirve para que sigan funcionando direcciones antiguas.

La ruta comodín ** coincide con cualquier URL. Como el router usa la primera coincidencia, va la última de la lista y suele mostrar una página de «No encontrada».

En lugar de component, una ruta puede usar loadComponent: () => import('./informes/informes'). Ese import() dinámico hace que el bundler saque el componente, y lo que solo él usa, a un archivo aparte que se descarga la primera vez que alguien visita la ruta. La carga inicial pesa menos.

loadChildren hace lo mismo con un grupo entero de rutas: apunta a un archivo que exporta un array Routes, como admin.routes.ts. Es la forma natural de dividir una aplicación grande por secciones.

Un guard canActivate se ejecuta cuando el router ya ha encontrado la ruta y antes de mostrarla. Es el caso clásico de la zona privada: si hay sesión, devuelve true; si no, devuelve un UrlTree hacia el login, con la dirección de destino en un query param para volver después.

canMatch actúa antes, mientras el router busca qué ruta coincide con la URL. Si devuelve false, el router hace como si la ruta no existiera y sigue probando las siguientes. Eso permite tener dos rutas con el mismo path para perfiles distintos y evita descargar el código de una ruta diferida que el usuario no puede usar.

canDeactivate se ejecuta al intentar abandonar una ruta y recibe la instancia del componente actual. Así puede preguntarle si tiene cambios pendientes, por ejemplo consultando form.dirty de un formulario reactivo, y pedir confirmación antes de dejar salir al usuario.

Un resolver es una función de tipo ResolveFn que el router ejecuta después de los guards y espera antes de activar la ruta. Lo que devuelve (un valor, una Promise o un Observable) queda disponible para el componente en ActivatedRoute.data o, con withComponentInputBinding(), como un input con el nombre de su clave.

A veces quien navega no es un enlace, sino el código: tras guardar un formulario, al terminar un pago, al cerrar la sesión. Para eso inyectas Router y llamas a navigate(), que recibe un array de segmentos como routerLink y opciones como queryParams o relativeTo, o a navigateByUrl(), que recibe la URL completa como texto.

Las dos devuelven una Promise que se resuelve con true si la navegación termina, o con false si, por ejemplo, un guard la cancela.