Obtener la ruta actual en Angular

1. La Definición y Uso de Rutas en Internet
2. Pasos para Obtener la Ruta Actual en Angular
3. Cree una plantilla HTML para obtener la ruta actual en Angular

Un enrutador angular es una herramienta poderosa que permite la navegación de la aplicación. Es un componente esencial para crear aplicaciones de una sola página.

Este artículo trata sobre el enrutador angular. Le será útil aprender cómo obtener la ruta actual en Angular.

Angular proporciona un enrutador para la aplicación frontal, que proporciona al usuario la ruta actual y permite la navegación a otras rutas. Además, Angular Router ofrece enlace de datos bidireccional, lo que significa que cualquier cambio de datos se refleja tanto en las vistas como en las URL.

La Definición y Uso de Rutas en Internet

No podemos hacer funcionar Internet sin rutas. Las rutas se utilizan para acceder al contenido en Internet. Es un servicio que le da acceso a todos los artículos, videos y otros contenidos en un solo lugar.

Informamos al servidor del sitio de la página que queremos ver usando rutas. Notificamos a www.wikipedia.com, por ejemplo, que estamos interesados ​​en /Angular (web framework).

https://en.wikipedia.org/wiki/Angular_(web_framework)

El enlace de arriba nos lleva al marco AngularJS. El servidor puede decidir con precisión qué página deseamos visitar con la ayuda de las rutas.

Además, suelen ser legibles por humanos. No solo es obvio para el servidor adónde ir, sino que también lo es para el usuario.

Reemplaza /Angular en el enlace con el nombre de cualquier sub-wiki que desees, y listo. Puede llegar allí sin utilizar la búsqueda ni hacer clic en ningún botón.

Los navegadores pueden manejar rutas bastante bien porque ha sido el formato predeterminado durante un período tan largo. Pueden monitorear fácilmente la navegación de un usuario y proporcionar funciones como un botón de retroceso o un historial.

Haga clic aquí para obtener más información sobre las rutas.

Pasos para Obtener la Ruta Actual en Angular

Angular proporciona una biblioteca poderosa y completa para el enrutamiento. Comprendamos los conceptos básicos del enrutamiento angular y analicemos cómo obtener su ruta actual.

Escribiremos un ejemplo completo de cómo obtener una ruta actual en Angular siguiendo los pasos mencionados anteriormente.

El servicio de enrutamiento proporciona un conjunto de API para definir rutas y parámetros de ruta. El enrutador angular se puede configurar para usar múltiples vistas para diferentes URL, de modo que pueda tener una página con dos secciones, cada una con su vista.

El RouterModule contiene toda la información relacionada con el enrutamiento. Angular está incluido en este módulo. Debemos importar ese módulo en nuestro AppModule para usar el enrutamiento.

Entonces, ¿cómo ponemos en práctica el enrutamiento? Como se dijo anteriormente, comenzamos importando el RouterModule..

import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';

Nuestra aplicación ya está lista para el enrutamiento. Debemos indicar las rutas que queremos que estén disponibles para nuestra aplicación.

Simultáneamente, decidiremos qué componentes presentar en rutas específicas. Pero empecemos por lo básico.

Es una excelente práctica crear un archivo de enrutamiento separado para definir las rutas; Module+.routing.ts es el nombre más común para este archivo de enrutamiento. Para hacer un archivo de enrutamiento para el AppModule, llamaríamos app-routing.module.ts.

Entonces, hagamos que ese archivo sea adyacente al archivo app.module.ts. Creamos un array estática en ese archivo que contiene todas las rutas del módulo.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { AppComponent } from './app.component';

import { ServicesComponent } from './services/services.component';

const routes: Routes = [
  {path: '', redirectTo: 'AppComponent', pathMatch: 'full'},

  {path:'aboutus', component:AboutusComponent},

  {path:'services', component:ServicesComponent},
];

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

Aquí, el array Routes, que definimos, es el elemento más crucial. Podemos definir nuestras rutas dentro de ese array.

Estas rutas se definen como objetos, como puede ver. Hay una propiedad de ruta en cada uno de ellos.

La ruta a nuestro aboutusComponent, por ejemplo, sería /aboutus. Aquí, también es posible construir rutas con parámetros variables.

Por ejemplo, podría tener un componente blog en la ruta blog. Sin embargo, queremos que este componente muestre diferentes blogs según la ruta.

Hacemos esto agregando la identificación del blog a la ruta.

Cree una plantilla HTML para obtener la ruta actual en Angular

Después de realizar los pasos mencionados, ahora es el momento de trabajar en el archivo HTML para obtener la ruta actual. Para eso, usamos un enlace de enrutador.

Usando el atributo routerLink, podemos vincular directamente las rutas de nuestra aplicación desde el documento HTML. Coloque la directiva dentro de un elemento HTML.

Angular mostrará la ruta actual cuando los visitantes hagan clic en el componente.

<h3>Example of How to get Current Route in Angular</h3>

<ul>
   <li routerLinkActive="active">
      <a [routerLink]="['/aboutus']">About Us</a>
   </li>
   <li routerLinkActive="active">
      <a [routerLink]="['/services']">Services</a>
   </li>

</ul>

The current Route is {{currentRoute}}

<router-outlet></router-outlet>

Además, aquí usamos una salida de enrutador. La salida para el enrutador, router-outlet, es una propiedad generada por RouterModule que sirve como marcador de posición para el enrutador, indicando dónde se debe insertar el componente coincidente.

El shell de la aplicación se refiere al componente que contiene la salida del enrutador.

<router-outlet></router-outlet>

En la misma aplicación, el enrutador Angular permite muchas salidas. La salida principal es la salida principal (o de nivel superior).

Por último, el atributo de salida le permite definir una salida de destino para una especificación de ruta.

Trabajemos en el paso final de obtener la ruta actual en Angular. Para eso, vamos a crear un archivo app.component.ts.

Recuerda que hemos creado dos rutas en nuestra aplicación, about us y services. Como queremos que nuestro módulo sea lo más autónomo posible, todas sus subrutas se definen en un archivo separado dentro del módulo.

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  currentRoute: string;
  constructor(private router: Router) {
    this.currentRoute = "Demo";
    this.router.events.subscribe((event: Event) => {

        if (event instanceof NavigationEnd) {
            this.currentRoute = event.url;
              console.log(event);
        }


    });

}
}

Aquí, NavigationEnd es un evento del enrutador activado o llamado cuando la navegación finaliza sin problemas. Para obtener más información sobre los eventos del enrutador, haga clic aquí.

Cuando hacemos clic en la sección de servicios, obtenemos la ruta actual de servicios, y lo mismo sucede con la sección acerca de nosotros.

Además, también puede modificar las secciones según sus requisitos.

Haga clic aquí para ver la demostración en vivo del código mencionado anteriormente.