Angular: 25. Rutas Hijas

Ya hemos visto cómo crear un NavBar con las distintas opciones de menú de una aplicación y el sistema de navegación de rutas de la misma. Ahora vamos a ver cómo crear rutas hijas, es decir, que dentro de una opción de menú (componente) encontremos otro menú de navegación que nos permita cargar un componente u otro.
Tenemos una aplicación con la típica barra de navegación y su sistema de rutas general que permite navegar entre opciones de menú:

Vamos a utilizar el componente "principiantes" para crear un sistema de subrutas en su interior. Tenemos, como siempre, el componente "principiantes", el componente "navbar" (barra de navegación), y el fichero de rutas general (app.routes.ts):

Primero creamos varios componentes de prueba dentro del componente "principiantes", y también un nuevo fichero de rutas "principiantes.routes.ts", también dentro del componente "principiantes":

Este nuevo fichero de rutas lo informamos de la misma forma que el fichero de rutas general, pero haciendo referencia sólo a los componentes de prueba que creamos dentro del componente "principiantes":

Ahora modificamos el fichero de rutas general de la siguiente forma:

Como se puede ver, hemos añadido la etiqueta "children" en el componente "principiantes", indicando la constante con la que nombramos el fichero de subrutas del componente "principiantes".

Ahora, en el fichero html del componente "principiantes", creamos un menú lateral con botones y un contenedor con la etiqueta "router-outlet", que será donde cargaremos los componentes hijos. Como se puede ver, se hace de la misma forma que con la navegación general:

Con esto sería todo.
Por último, modificamos el fichero CSS del componente "principiantes" para aplicar estilo a los botones del menú lateral del componente. Esto no es necesario, sólo lo incluyo para que los colores del menú coincidan con los de la barra de navegación principal, pero no afecta en nada a su funcionamiento:

Ahora levantamos la aplicación, entramos en el menú de "Principiantes", y comprobamos que el menú lateral funciona correctamente, cargando el componente correspondiente al botón que pulsemos:

Y eso es todo. Podemos crear tantos sistemas de subrutas como queramos de esta manera.