Primero debemos crearnos un fichero nuevo dentro de la carpeta "app". Lo llamaremos "app.routes.ts" y nos servirá como fichero configurador de rutas:
Lo informamos con el siguiente contenido:
Como se ve en el fichero, primero importamos todos los componentes que tendrá nuestro menú, que coincidirán con las secciones del menú.
Después configuramos una constante "APP_ROUTES" que asignará un nombre de ruta a cada componente, con una ruta final por defecto (la que cargará al entrar por primera vez en la aplicación o si entramos en una ruta no válida) que llevará, en este caso, al nombre de ruta "home".
Después, modificamos el fichero "app.module.ts" para importar el fichero de rutas como se ve en la imagen:
A continuación, configuramos el html de nuestro menú para que cada opción de menú llame a una ruta distinta mediante la etiqueta "[routerLink]". Los nombres de las rutas que indicamos en esas etiquetas coinciden con los que les dimos en el fichero "app.routes.ts":
Por último, en el fichero "app.component.html", que es donde definimos los elementos de la página, creamos un contenedor div y dentro incluimos la etiqueta "router-outlet":
La etiqueta "router-outlet" es la etiqueta donde se va a cargar el contenido de la ruta en la que estemos en éste momento. Es el contenido de la página que se va a ir sustituyendo a medida que vayamos navegando por el menú. Lo hemos incluido dentro de una etiqueta div que servirá de contenedor.
Al inicio del documento y fuera del contenedor tenemos la etiqueta "app-navbar", que es el menú de la aplicación. Está fuera del contenedor porque el propio menú no debe recargarse al cambiar de ruta. Podemos pensar que el fichero "app.component.html" es el "marco" de la aplicación y que la etiqueta "router-outlet" es el "contenido" de la misma que se va modificando a medida que navegamos por la aplicación.
Una vez echas todas estas modificaciones, podemos comprobar que funciona correctamente:
No hay comentarios:
Publicar un comentario