Después de configurar las rutas, el siguiente paso es decidir cómo navegar. La navegación se realizará en base a las acciones del usuario, como hacer clic en un hipervínculo, etc.
Utilice la directiva RouterLink a la etiqueta del ancla para la navegación, como se muestra a continuación.
Nombre del archivo: app.module.ts
123456789import{Componente}de$0027@angular/core$0027;@Componente({ selector:$0027app-root$0027, styleUrls:[$0027./app.component.css$0027], templateUrl:$0027./app.component.html$0027})exportclassAppComponent{ title =$0027Employee application$0027;}tipografía
Nombre de archivo: app.component.html
123456<h1;{{{{title}}}</h1;};<[routerLink]=$0027["/employeedashboard"]$0027 routerLinkActive="active"``EmpleadoDashboard< /a[;a [routerLink]=$0027["/empleados"]$0027 routerLinkActive="active"³;Employees</a>/nav;³³³³³³³$0027router-outlet$0027;³³³$0027/router-outlet$0027$0027;tipografía
En el ejemplo anterior, creamos hipervínculos y una directiva de routerLink y especificamos las rutas para navegar. Si un usuario hace clic en el tablero de empleados, navegará hasta /employeedashboard. routerLinkActive aplica la clase CSS dada al enlace cuando se hace clic en él para que parezca un enlace activo (activo es una clase CSS definida en app.component.css que cambia el color del enlace a azul en este caso).
La salida del enrutador es el lugar en el que se mostrará la salida del componente asociado con el camino dado. Por ejemplo, si un usuario hace clic en Empleados , navegará hasta /empleados, que ejecutará la clase EmployeesComponent como se menciona en los detalles de configuración, y la salida se mostrará en la clase router-outlet. Para navegar de forma programada, podemos utilizar el método navigate() de la clase router. Inyecta la clase de router en el componente e invoca el método navigate como se muestra a continuación.
1this.router.navigate([url, parámetros])
tipografía