Introduction

Le navigateur est un modèle familier de navigation dans les applications :

• Entrez une URL dans la barre d'adresse et le navigateur navigue vers une page correspondante.
• Cliquez sur les liens sur la page et le navigateur navigue vers une nouvelle page.
• Cliquez sur les boutons "Précédent" ou "Suivant" pour naviguer dans l'historique des pages que vous avez consultées.

Le routeur Angular ("le routeur") emprunte ce modèle. Il peut interpréter une URL de navigateur comme une instruction permettant d'accéder à une vue générée par le client. Il peut transmettre des paramètres facultatifs au composant de la vue prise en charge, ce qui l'aide à choisir le contenu spécifique à présenter. Vous pouvez lier le routeur à des liens sur une page et accéder à la vue de l'application appropriée lorsque l'utilisateur clique sur un lien. Vous pouvez naviguer impérativement lorsque l'utilisateur clique sur un bouton, le sélectionne dans une liste déroulante ou en réponse à un autre stimulus de n'importe quelle source. Et le routeur enregistre l'activité dans le journal de l'historique du navigateur afin que les boutons Précédent et Suivant fonctionnent également.

Les bases

Ce guide procède par étapes, marquées par des jalons, en partant d'un simple deux pages et en passant à une conception modulaire à vues multiples avec des itinéraires enfants.

Une introduction à quelques concepts de routeur de base vous aidera à vous orienter vers les détails qui suivent.

‹base href›

La plupart des applications de routage doivent ajouter un élément ‹base› au index.html premier enfant de la balise ‹head› pour indiquer au routeur comment composer les URL de navigation.

Si le dossier app est la racine de l'application, comme c'est le cas pour l'exemple d'application, définissez la valeur du HREF exactement comme indiqué ici.

Importation de routeur

Le routeur Angular est un service facultatif qui présente une vue de composant particulière pour une URL donnée. Cela ne fait pas partie du noyau Angular. Il est dans son propre paquet de bibliothèque "@angular/router". Importez ce dont vous avez besoin comme tout autre paquet Angular.

Configuration

Une application Angular routée possède une instance singleton du service Router. Lorsque l'URL du navigateur change, ce routeur recherche un correspondant à partir du "Route" pour déterminer le composant à afficher.

Un routeur n'a pas de route jusqu'à ce que vous le configuriez. L'exemple suivant crée cinq définitions de route, configure le routeur via le RouterModule, la méthode forRoot ajoute le résultat au tableau imports AppModule.


Le tableau d'itinéraires appRoutes explique comment naviguer. Transmettez-le à la méthode RouterModule.forRoot dans les importations de module pour configurer le routeur.

Chaque itinéraire mappe un chemin d'URL vers un composant. Il n'y a pas de barre oblique dans le chemin. Le routeur analyse et construit l'URL finale pour vous, vous permettant d'utiliser des chemins d'accès relatifs et absolus lors de la navigation entre les vues d'application.

Le :id dans la deuxième route est un jeton pour un paramètre de route. Dans une URL telle que /hero/42, "42" est la valeur du paramètre id. Le HeroDetailComponent correspondant utilisera cette valeur pour rechercher et présenter le héros dont l'identifiant est 42.
La propriété data de la troisième route est un emplacement pour stocker des données arbitraires associées à cette route spécifique. La propriété de données est accessible dans chaque itinéraire activé. Utilisez-le pour stocker des éléments tels que les titres de page, le texte de fil d'Ariane et d'autres données statiques en lecture seule. Vous utiliserez la fonction de résolution pour récupérer des données dynamiques plus tard dans le guide.

Le chemin vide de la quatrième route représente le chemin par défaut pour l'application, l'endroit où aller lorsque le chemin dans l'URL est vide, comme c'est généralement le cas au début. Cette route par défaut redirige la route pour l'URL /heroes et, par conséquent, affichera le composant HeroesListComponent.

Le chemin ** dans le dernier itinéraire est un caractère générique. Le routeur sélectionnera cette route si l'URL demandée ne correspond à aucun des chemins pour les routes définies précédemment dans la configuration. Ceci est utile pour afficher une page "404 - Introuvable" ou pour rediriger vers un autre itinéraire.

L'ordre des routes dans la configuration est important et ceci est voulu. Le routeur utilise une stratégie de gain par première correspondance lors de la mise en correspondance d'itinéraires. Par conséquent, des itinéraires plus spécifiques doivent être placés au-dessus d'itinéraires moins spécifiques. Dans la configuration ci-dessus, les routes avec un chemin statique sont listées en premier, suivies par une route de chemin vide, qui correspond à la route par défaut. La route générique vient en dernier car elle correspond à toutes les URL et ne doit être sélectionnée que si aucune autre route ne correspond en premier.

Si vous devez voir quels événements se produisent pendant le cycle de vie de la navigation, l'option enableTracing fait partie de la configuration par défaut du routeur. Cela renvoie chaque événement de routeur qui s'est produit pendant chaque cycle de vie de navigation sur la console du navigateur. Cela ne devrait être utilisé qu'à des fins de débogage. Vous définissez l'option enableTracing : true dans l'objet passé en tant que deuxième argument de la méthode RouterModule.forRoot().

Prise de routeur

Le RouterOutlet est une directive de la bibliothèque de routeur qui est utilisée comme un composant. Il agit comme un espace réservé qui marque l'endroit du modèle où le routeur doit afficher les composants de cette prise.


Compte tenu de la configuration ci-dessus, lorsque l'URL du navigateur de cette application devient /heroes, le routeur fait correspondre cette URL au chemin de la route /heroes et affiche l'élément HeroListComponent frère de l'élément RouterOutlet que vous avez placé dans le modèle du composant hôte.

Liens de routeur

Vous avez maintenant des itinéraires configurés et un emplacement pour les rendre, mais comment naviguez-vous ? L'URL peut arriver directement à partir de la barre d'adresse du navigateur. Mais la plupart du temps, vous naviguez à la suite d'une action de l'utilisateur, telle que le clic d'une balise d'ancrage.


Les directives RouterLink sur les balises d'ancrage permettent au routeur de contrôler ces éléments. Les chemins de navigation sont fixes, vous pouvez donc affecter une chaîne à la liaison routerLink (une liaison "ponctuelle").

Si le chemin de navigation avait été plus dynamique, vous auriez pu être lié à une expression de modèle renvoyant un tableau de paramètres de lien de route (le tableau de paramètres de lien). Le routeur résout ce tableau en une URL complète.

Liens de routeur actifs

La directive RouterLinkActive bascule les classes css pour les liaisons RouterLink actives en fonction du courant RouterState.

Sur chaque balise d'ancrage, vous voyez une propriété se liant à la directive RouterLinkActive, routerLinkActive="...".

L'expression de modèle à droite de equals (=) contient une chaîne de classes CSS délimitée par des espaces que le routeur ajoutera lorsque ce lien sera actif (et supprimera ce lien lorsque ce lien sera inactif). Vous définissez la directive RouterLinkActive sur une chaîne de classes, ou vous la liez à une propriété de composant qui renvoie une telle chaîne [routerLinkActive]="'active fluffy'"

Les liens de route actifs se propagent en cascade à travers chaque niveau de l'arbre de route, les liens de routeur parent et enfant peuvent donc être actifs simultanément. Pour remplacer ce comportement, vous pouvez vous lier à [routerLinkActiveOptions] la liaison d'entrée avec l'expression {exact: true } En utilisant {exact: true}, une donnée ne sera active que si son URL correspond exactement à l'URL actuelle.

État du routeur

À la fin de chaque cycle de vie de navigation réussi, le routeur crée une arborescence d'objets ActivatedRoute qui constituent l'état actuel du routeur. Vous pouvez accéder au courant RouterState de n'importe où dans l'application à l'aide du Routerservice et de la propriété routerState.

Chaque ActivatedRoute en RouterState fournit des méthodes pour parcourir de haut en bas de l'arbre de route pour obtenir de l'information des parents, des enfants et des itinéraires frères et soeurs.

Itinéraire activé

Le chemin et les paramètres de la route sont disponibles via un service de routeur injecté appelé ActivatedRoute. Il contient de nombreuses informations utiles, notamment :

Propriété	Description
url	Un des Observable chemins de route, représenté par un tableau de chaînes pour chaque partie du chemin de route.
data	Un Observable qui contient l'objet data fourni pour l'itinéraire. Contient également toutes les valeurs résolues par le garde de résolution .
paramMap	Un Observable qui contient une carte des paramètres obligatoires et facultatifs spécifiques à l'itinéraire. La carte prend en charge la récupération de valeurs uniques et multiples à partir du même paramètre.
queryParamMap	Un Observable qui contient une carte des paramètres de requête disponibles pour tous les itinéraires. La carte prend en charge la récupération de valeurs uniques et multiples à partir du paramètre de requête.
fragment	Un Observable des fragments d'URL disponibles pour toutes les routes.
outlet	Le nom du RouterOutlet utilisé pour rendre la route. Pour une prise non nommée, le nom de la prise est primaire.
routeConfig	La configuration de la route utilisée pour la route contenant le chemin d'origine.
parent	Le parent de l'itinéraire ActivatedRoute lorsque cet itinéraire est un itinéraire enfant .
firstChild	Contient le premier ActivatedRoute de la liste des itinéraires enfants de cet itinéraire.
children	Contient tous les itinéraires enfants activés sous l'itinéraire actuel.

Résumé

Router Part	Sens
Router	Affiche le composant d'application pour l'URL active. Gère la navigation d'un composant à l'autre.
RouterModule	Un NgModule distinct qui fournit les fournisseurs de services et les directives nécessaires pour naviguer dans les vues d'application.
Routes	Définit un tableau d'itinéraires, chacun mappant un chemin d'URL vers un composant.
Route	Définit comment le routeur doit accéder à un composant basé sur un modèle d'URL. La plupart des itinéraires consistent en un chemin et un type de composant.
RouterOutlet	La directive() qui marque où le routeur affiche une vue ‹router-outlet›
RouterLink	Directive permettant de lier un élément HTML cliquable à une route. Cliquer sur un élément avec une directive routerLink liée à une chaîne ou à un tableau de paramètres de lien déclenche une navigation.
RouterLinkActive	La directive permettant d'ajouter/supprimer des classes d'un élément HTML lorsqu'un élément routerLinkcontenu dans ou sur l'élément devient actif/inactif.
ActivatedRoute	Un service fourni à chaque composant de route contenant des informations spécifiques à la route, telles que des paramètres de route, des données statiques, des données de résolution, des paramètres de requête globale et le fragment global.
RouterState	L'état actuel du routeur, y compris une arborescence des routes actuellement activées, ainsi que des méthodes pratiques pour parcourir cette arborescence.
Lien paramètres tableau	Un tableau que le routeur interprète comme une instruction de routage. Vous pouvez lier ce tableau à a RouterLink ou le transmettre en tant qu'argument à la méthode Router.navigate.
Composant de routage	Un composant angulaire avec RouterOutlet qui affiche des vues basées sur les navigations du routeur.