‹base›
au index.html
premier enfant de la balise ‹head›
pour indiquer au routeur comment composer les URL de navigation.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.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.Router
.
Lorsque l'URL du navigateur change, ce routeur recherche un correspondant à partir du "Route" pour déterminer le composant à afficher.RouterModule
,
la méthode forRoot
ajoute le résultat au tableau imports AppModule
.appRoutes
explique comment naviguer.
Transmettez-le à la méthode RouterModule.forRoot
dans les importations de module pour configurer le routeur.: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
.
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./heroes
et, par conséquent, affichera le composant HeroesListComponent
.**
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.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()
.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./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.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").RouterLinkActive
bascule les classes css pour les liaisons RouterLink
actives en fonction du courant RouterState
.RouterLinkActive
, routerLinkActive="..."
.=
) 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'"
[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.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
.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.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. |
Router.events
.
Ces événements vont du début et de la fin de la navigation à de nombreux points intermédiaires.
La liste complète des événements de navigation est affichée dans le tableau ci-dessous.Événement de routeur | Description |
---|---|
NavigationStart |
Un événement déclenché au début de la navigation. |
RouteConfigLoadStart |
Un événement déclenché avant que le Router paresseux charge une configuration de route. |
RouteConfigLoadEnd |
Un événement déclenché après le chargement paresseux d'une route. |
RoutesRecognized |
Un événement déclenché lorsque le routeur analyse l'URL et que les itinéraires sont reconnus. |
GuardsCheckStart |
Un événement déclenché lorsque le routeur commence la phase de routage des gardes. |
ChildActivationStart |
Un événement déclenché lorsque le routeur commence à activer les enfants d'un itinéraire. |
ActivationStart |
Un événement déclenché lorsque le routeur commence à activer un itinéraire. |
GuardsCheckEnd |
Un événement déclenché lorsque le routeur termine avec succès la phase de routage des gardes. |
ResolveStart |
Un événement déclenché lorsque le routeur commence la phase de résolution du routage. |
ResolveEnd |
Un événement déclenché lorsque le routeur termine avec succès la phase de résolution du routage. |
ChildActivationEnd |
Un événement déclenché lorsque le routeur termine l'activation des enfants d'un itinéraire. |
ActivationEnd |
Un événement déclenché à la fin de l'activation d'un itinéraire par le routeur. |
NavigationEnd |
Un événement déclenché lorsque la navigation se termine avec succès. |
NavigationCancel |
Un événement déclenché lorsque la navigation est annulée. Cela est dû au fait que Route Guard a renvoyé la valeur false pendant la navigation. |
NavigationError |
Un événement déclenché lorsque la navigation échoue en raison d'une erreur inattendue. |
Scroll |
Un événement qui représente un événement de défilement. |
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. |