Obtenir l'itinéraire actuel en Angular

1. La définition et l’utilisation des routes sur Internet
2. Étapes pour obtenir l’itinéraire actuel en Angular
3. Créer un modèle HTML pour obtenir l’itinéraire actuel dans Angular

Un routeur Angular est un outil puissant qui permet la navigation de l’application. C’est un composant essentiel pour créer des applications d’une seule page.

Cet article concerne le routeur Angular. Il vous sera utile d’apprendre comment obtenir l’itinéraire actuel dans Angular.

Angular fournit un routeur pour l’application frontale, qui fournit à l’utilisateur l’itinéraire actuel et permet la navigation vers d’autres itinéraires. De plus, le routeur Angular offre une liaison de données bidirectionnelle, ce qui signifie que toute modification des données est reflétée à la fois dans les vues et les URL.

La définition et l’utilisation des routes sur Internet

Nous ne pouvons pas faire fonctionner Internet sans routes. Les routes sont utilisées pour accéder au contenu sur Internet. C’est un service qui vous donne accès à tous les articles, vidéos et autres contenus en un seul endroit.

Nous informons le serveur du site de la page que nous voulons voir à l’aide de routes. Nous notifions www.wikipedia.com, par exemple, que nous sommes intéressés par /Angular (web framework).

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

Le lien ci-dessus nous amène au framework AngularJS. Le serveur peut décider avec précision quelle page nous souhaitons visiter à l’aide d’itinéraires.

De plus, ils sont généralement lisibles par les humains. Ce n’est pas seulement évident pour le serveur où aller, mais c’est aussi évident pour l’utilisateur.

Remplacez /Angular sur le lien par le nom de n’importe quel sous-wiki que vous désirez, et vous avez terminé. Vous pouvez y accéder sans utiliser la recherche ni cliquer sur aucun bouton.

Les navigateurs peuvent gérer assez bien les routes car c’est le format par défaut depuis si longtemps. Ils peuvent facilement surveiller la navigation d’un utilisateur et fournir des fonctionnalités telles qu’un bouton de retour ou un historique.

Cliquez ici pour en savoir plus sur les itinéraires.

Étapes pour obtenir l’itinéraire actuel en Angular

Angular fournit une bibliothèque puissante et complète pour le routage. Comprenons les bases du routage Angular et discutons de la façon d’obtenir votre itinéraire actuel.

Nous allons écrire un exemple complet d’obtention d’un itinéraire actuel dans Angular en utilisant les étapes mentionnées ci-dessus.

Le service de routage fournit un ensemble d’API pour définir les routes et les paramètres de route. Le routeur Angular peut être configuré pour utiliser plusieurs vues pour différentes URL afin que vous puissiez avoir une page avec deux sections, chacune avec sa vue.

Le RouterModule contient toutes les informations relatives au routage. Angular est inclus dans ce module. Nous devons importer ce module dans notre AppModule pour utiliser le routage.

Alors, comment mettons-nous le routage en pratique ? Comme indiqué précédemment, nous commençons par importer le RouterModule..

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

Notre application est maintenant prête pour le routage. Nous devons indiquer les itinéraires que nous voulons rendre disponibles à notre application.

Simultanément, nous déciderons des composants à présenter sur des itinéraires spécifiques. Mais commençons par les bases.

Il est recommandé de créer un fichier de routage séparé pour définir les routes ; Module+.routing.ts est le nom le plus courant pour ce fichier de routage. Pour créer un fichier de routage pour le AppModule, nous appellerions app-routing.module.ts.

Faisons donc en sorte que ce fichier soit adjacent au fichier app.module.ts. Nous construisons un tableau statique dans ce fichier qui contient toutes les routes du module.

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 { }

Ici, le tableau Routes, que nous avons défini, est l’élément le plus crucial. Nous pouvons définir nos routes à l’intérieur de ce tableau.

Ces itinéraires sont définis comme des objets, comme vous pouvez le voir. Il y a une propriété path dans chacun d’eux.

Le chemin vers notre aboutusComponent, par exemple, serait /aboutus. Ici, il est également possible de construire des routes avec des paramètres variables.

Par exemple, vous pourriez avoir un composant blog sous la route blog. Cependant, nous voulons que ce composant affiche différents blogs en fonction de l’itinéraire.

Pour ce faire, nous ajoutons l’identifiant du blog à la route.

Créer un modèle HTML pour obtenir l’itinéraire actuel dans Angular

Après avoir suivi les étapes mentionnées, il est maintenant temps de travailler sur le fichier HTML pour obtenir l’itinéraire actuel. Pour cela, nous utilisons un lien routeur.

En utilisant l’attribut routerLink, nous pouvons directement lier les routes de notre application à partir du document HTML. Placez la directive dans un élément HTML.

Angular affichera l’itinéraire actuel lorsque les visiteurs cliqueront sur le composant.

<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>

De plus, ici, nous avons utilisé une prise de routeur. La prise pour le routeur, router-outlet, est une propriété générée par RouterModule qui sert d’espace réservé pour le routeur, indiquant où le composant correspondant doit être inséré.

Le shell de l’application fait référence au composant qui contient la prise du routeur.

<router-outlet></router-outlet>

Dans une même application, le routeur Angular permet de nombreuses prises. La prise principale est la prise principale (ou de niveau supérieur).

Enfin, l’attribut outlet vous permet de définir un outlet cible pour une spécification de route.

Travaillons sur la dernière étape pour obtenir l’itinéraire actuel dans Angular. Pour cela, créons un fichier app.component.ts.

N’oubliez pas que nous avons créé deux routes dans notre application, about us et services. Parce que nous voulons que notre module soit aussi autonome que possible, toutes ses sous-routes sont définies dans un fichier séparé au sein du module.

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);
        }


    });

}
}

Ici, NavigationEnd est un routeur déclenché par un événement ou appelé lorsque la navigation se termine en douceur. Pour en savoir plus sur les événements de routeur, cliquez ici.

Lorsque nous cliquons sur la section des services, nous obtenons l’itinéraire actuel des services, et la même chose se produit avec la section à propos de nous.

De plus, vous pouvez également modifier les sections en fonction de vos besoins.

Cliquez ici pour vérifier la démonstration en direct du code mentionné ci-dessus.