Introducción
Angular las aplicaciones son muy comunes hoy en día. Están construidas con el concepto de Aplicaciones de una sola página (SPA). En tales aplicaciones, el enrutamiento a través de las páginas web es diferente de los sitios web tradicionales ya que se utilizan componentes. En Angular, necesitas usar RouterLink para la navegación para enrutar a través de la aplicación. RouterLink es una directiva, y proporciona Router.navigate y Router.navigateByURL métodos para navegar a través de las clases de componentes.
In este tutorial, estaremos analizando RouterLink, Router.navigate, y Router.navigateByURL junto con ejemplos de código.
RouterLink
En HTML, un enlace normalmente se inserta usando una etiqueta de anclaje <a> como a continuación:
|
1 2 3 |
<a href="/sample"> Enlace HTML de ejemplo. </a> |
Este enlace de ejemplo navegará al usuario a la página /sample . Sin embargo, como se mencionó anteriormente, una aplicación de una sola página (SPA) no tiene diferentes páginas a las que enlazar. En su lugar, tiene diferentes vistas o componentes para mostrar al usuario.
Si necesitas permitir que un usuario navegue y cambie la vista, tendrás que usar la directiva RouterLink en lugar de href:
|
1 2 3 |
<a routerLink="/users/example"> Enlace que utiliza una cadena. </a> |
Este RouterLink ejemplo llevará al usuario al componente en /users/example. Los diferentes segmentos de URL también se pueden pasar en una matriz como en el siguiente ejemplo:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Un ejemplo de un enlace con una matriz. </a> |
Estos dos ejemplos están formateados de una manera diferente, pero aún así se dirigirán al mismo componente en /users/example.
-
Ruta relativa
El RouterLink permite especificar las URL relativas. Podemos usar ../ para subir a los niveles superiores de navegación. A continuación se muestra cómo podemos lograr esto:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Enlace que sube un nivel. </a> |
En el ejemplo anterior, si el usuario está en /users/posts, la navegación llevará al usuario a /posts/parent. También puedes especificar las URL de forma relativa usando ./, ../, o incluso sin barra diagonal inicial si es necesario.
-
Parámetros
Puede haber escenarios en los que necesites pasar datos entre las rutas. Un ejemplo simple es cuando el usuario completa el formulario y lo llevas a la siguiente parte del formulario para obtener más detalles.
Para pasar los parámetros, se pasa un objeto que encapsula los datos en la lista de segmentos de URL:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Enlace con parámetro. </a> |
Arriba, el Router navegará a /users;display=sample/xyz.
-
Outlets con nombre
Los outlets de enrutador con nombre son simplemente outlets de enrutador con nombres. Veamos el código para esto:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Enlace con un outlet lateral. </a> |
En ese ejemplo, el segmento xyz se colocará en el outlet llamado side. También podemos especificar múltiples outlets con nombre como a continuación:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Enlace con el primer y segundo outlet. </a> |
Esto reemplazará el segmento first con abc y el segmento second se reemplaza con xyz.
Router
En Angular, el Router se utiliza para definir las rutas y navegar a través de ellas. Esto se logra mediante dos métodos: Router.navigate y Router.navigateByUrl. Ambos métodos devuelven una promesa. Esta promesa puede tener tres valores: true, false, o null.
-
El valor es true cuando la navegación es exitosa.
-
El valor es null cuando no hay navegación.
-
Y false si por alguna razón la navegación falla.
Si desea tener estos métodos disponibles en su aplicación, primero debe importar la clase Router en la clase de su componente:
|
1 |
import { Router } from '@angular/router'; |
A continuación, debe inyectar este Router en el constructor a las dependencias:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
Con esta configuración, ya está listo para usar los métodos Router.navigate y Router.navigateByUrl en su aplicación.
Router.navigate
El método Router.navigate acepta un array de segmentos de URL. Veamos un ejemplo básico de código de Router.navigate:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Finalmente, veamos Router.navigateByUrl. Este método es similar a Router.navigate pero en lugar de aceptar segmentos de URL, acepta una cadena que especifica la URL. Esta navegación debe ser absoluta y debe tener / al principio:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
El código anterior navegará al usuario a la página /users;all=true.
Conclusión
En este tutorial, vimos cómo navegar en aplicaciones Angular usando RouterLink. El enrutamiento en las aplicaciones Angular es un poco diferente al de las aplicaciones web tradicionales debido a que son de una sola página (Single-Page). Conocer RouterLink y sus funciones puede ayudar a los desarrolladores a crear un enrutamiento robusto.
Las aplicaciones Angular utilizan Node.js como su entorno de ejecución. Si desea obtener más información sobre Node.js y cómo implementar aplicaciones Node.js, puede echar un vistazo a los siguientes tutoriales:
- Cómo instalar Node.js en Ubuntu 18.04
- Configuración de aplicaciones Node.js: cómo realizar tareas de producción en Ubuntu 20.04 con Node.js
- Cómo implementar una aplicación Node.js (Express.js) con Docker en Ubuntu 20.04
¡Feliz computación!
Comentarios
Aún no hay comentarios. Sea el primero.