Router Link en Angular

Introduciremos el método routerLink en Angular y usaremos este método para la navegación.

Router Link en Angular

La navegación es una de las partes más importantes de cualquier aplicación web o sitio web. Incluso cuando creamos una aplicación de una sola página (SPA) con una sola página, todavía usamos la navegación para saltar de una sección a otra.

La navegación facilita a los usuarios encontrar lo que buscan en las aplicaciones web. Podemos hacer que nuestra aplicación sea amigable y fácil de usar proporcionando una navegación simple y fácil de entender.

Angular proporciona muchos métodos de navegación para lograr enrutamiento simple a complejo fácilmente. Angular proporciona un módulo separado, RouterModule, para configurar la navegación en nuestra aplicación web.

Una aplicación de una sola página (SPA) no tiene diferentes páginas para enlazar, pero muestra diferentes vistas. Normalmente mostramos un enlace usando HTML como se muestra a continuación.

# angular
<a href="/link">
  Example link in HTML.
</a>

Angular nos proporciona una directiva, routerLink, que se puede usar en lugar de href, como se muestra a continuación.

# angular
<a routerLink="/home">
  Link Name.
</a>

Hay 2 formas de usar routerLink, una se usa como una cadena y la otra se usa como un array, como se muestra a continuación.

# angular
<a routerLink="/home">
  Link used as a string.
</a>
<a [routerLink]="['/', 'user', 'fakhar']">
  Link used as an array.
</a>

El [routerLink] se usa cuando queremos pasar parámetros en un enlace, mientras que usamos routerLink cuando queremos un enlace. Pasaremos por un ejemplo en el que navegaremos a través de diferentes componentes utilizando routerLink.

Así que vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Generaremos componentes usando comandos. Primero, generaremos nuestro componente home.

# angular
ng generate component home

Una vez hayamos generado nuestro componente home, generaremos nuestro componente about.

# angular
ng generate component about

Por último, generamos nuestro componente servicios usando el siguiente comando.

# angular
ng generate component services

Después de generar nuestros componentes, tendremos tres componentes en carpetas separadas con 3 archivos.

Producción:

Una vez que hayamos generado nuestros componentes, crearemos las vistas. Primero, abriremos about.component.html desde la carpeta about y agregaremos el siguiente código.

# angular
<div class="container" >
  <h1> This is about Component </h1>
  <h3> Try navigating to other components </h3>
</div>

Abriremos el archivo home.component.html de la carpeta home y añadiremos el siguiente código.

# angular
<div class="container">
 <h1> This is home component </h1>
 <h3> Try navigating to other components </h3>
</div>

Abriremos el archivo services.component.html de la carpeta services y añadiremos el siguiente código.

# angular
<div class="container">
 <h1> This is Services component </h1>
 <h3> Try navigating to other components </h3>
</div>

Una vez que tengamos listos nuestros componentes y vistas, definiremos nuestras rutas en app-routing.module.ts. Importaremos ngModule.

También importaremos Routes y RouterModule desde router e importaremos nuestros componentes creados.

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Una vez que hayamos importado todo, definiremos rutas a nuestros componentes, como se muestra a continuación.

# angular
const routes: Routes = [

    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent},
    { path: 'services', component: ServicesComponent },
 ];

Crearemos nuestro menú de navegación en app.component.html. Usaremos routerLink para obtener los enlaces de las rutas que acabamos de definir y usaremos router-outlet para mostrar el contenido de nuestros componentes.

<ul class="nav navbar-nav">
  <li>
    <a routerLink="/home">Home</a>
  </li>
  <li>
    <a routerLink="/about">About</a>
  </li>
  <li>
    <a routerLink="/services">Services</a>
  </li>
</ul>

<router-outlet> </router-outlet>

Producción:

El ejemplo anterior muestra que podemos navegar fácilmente de un componente a otro usando routerLink y definiendo rutas.

Entonces, en este tutorial, aprendimos cómo crear componentes y definir rutas, usar routerLink para navegar entre componentes fácilmente y usar routerLink y [routerLink].

Demostración aquí