Revenir à la liste
Le HeroDetailComponentbouton possède un bouton "Retour" relié à sa gotoHeroesméthode qui permet de revenir impérativement à la page HeroListComponent.
La navigateméthode de routeur utilise le même tableau de paramètres de liaison à élément unique que vous pouvez lier à une directive.
Il détient le chemin vers le :[routerLink]HeroListComponent
src / app / heroes / hero-detail / hero-detail.component.ts (extrait)
Utilisez les paramètres de route pour spécifier une valeur de paramètre requise dans l'URL de route,
comme vous le faites lorsque vous accédez HeroDetailComponentà pour afficher le héros avec l' identifiant 15:
Paramètres de route: Obligatoire ou facultatif ?
Vous pouvez également ajouter des informations facultatives à une demande d'itinéraire.
Par exemple, lorsque vous revenez à la liste hero-detail.component.ts à partir de la vue détaillée du héros,
il serait bien que le héros visualisé soit présélectionné dans la liste.
Vous allez implémenter cette fonctionnalité dans un instant en incluant le héros visualisé id dans l'URL comme paramètre facultatif lors du retour depuis le fichier HeroDetailComponent.
Les informations facultatives prennent d'autres formes. Les critères de recherche sont souvent mal structurés, par exemple name='wind*'.
Plusieurs valeurs sont communes after='12/31/2015' & before='1/1/2017'- dans aucun ordre particulier before='1/1/2017' & after='12/31/2015'- dans une variété de formats - during='currentYear'.
Ces types de paramètres ne rentrent pas facilement dans un chemin d' URL.
Même si vous pouviez définir un schéma de jeton d'URL approprié, cela compliquerait grandement la correspondance de modèle requise pour traduire une URL entrante en une route nommée.
Les paramètres facultatifs sont le véhicule idéal pour transmettre des informations arbitrairement complexes pendant la navigation.
Les paramètres facultatifs n'interviennent pas dans la correspondance des modèles et offrent une souplesse d'expression.
Le routeur prend en charge la navigation avec des paramètres facultatifs ainsi que les paramètres de route requis.
Définissez des paramètres facultatifs dans un objet distinct après avoir défini les paramètres de routage requis.
En général, préférez un paramètre de route requis lorsque la valeur est obligatoire (par exemple, si nécessaire pour distinguer un chemin de route d'un autre);
préférez un paramètre facultatif lorsque la valeur est facultative, complexe et / ou multivariée.
Liste des héros: sélection éventuelle d'un héros
Lors de la navigation, HeroDetailComponentvous avez spécifié le paramètre requis id du héros à
modifier dans le paramètre route et vous en avez fait le deuxième élément du tableau des paramètres de liaison.
src / app / heroes / hero-list / hero-list.component.ts (tableau de paramètres de liens)
Le routeur a incorporé la idvaleur dans l'URL de navigation car vous l'aviez définie en tant que paramètre d'itinéraire avec un :idjeton d'espace réservé dans l'itinéraire path:
src / app / heroes / heroes-routing.module.ts (hero-detail-route)
Lorsque l'utilisateur clique sur le bouton Précédent, il HeroDetailComponentconstruit un autre tableau de paramètres de liens qu'il utilise pour revenir au fichier HeroListComponent.
src / app / heroes / hero-detail / hero-detail.component.ts (gotoHeroes)
Il n'existe pas de paramètre de route dans ce tableau car vous n'avez aucune raison d'envoyer des informations à HeroListComponent.
Maintenant vous avez une raison. Vous souhaitez envoyer l'identifiant du héros actuel avec la demande de navigation afin qu'il HeroListComponentpuisse le surligner dans sa liste.
C'est une fonctionnalité intéressante. la liste s'affichera parfaitement bien sans elle.
Envoyez le idavec un objet contenant un paramètre facultatif id . à des fins de démonstration, il existe un paramètre indésirable supplémentaire (foo) dans l'objet qu'il HeroListComponentdoit ignorer.
Voici la déclaration de navigation révisée:
src / app / heroes / hero-detail / hero-detail.component.ts (aller aux héros)
L'application fonctionne toujours. En cliquant sur "retour" revient à la vue de la liste des héros.
Regardez la barre d'adresse du navigateur.
Cela devrait ressembler à ceci, selon l'endroit où vous le lancez:
La idvaleur apparaît dans l'URL sous la forme ( ;id=15;foo=foo), pas dans le chemin de l'URL. Le chemin pour la route "Heroes" n'a pas de :idjeton.
Les paramètres de route facultatifs ne sont pas séparés par "?" et "&" comme ils seraient dans la chaîne de requête d'URL.
Ils sont séparés par des points-virgules ";" Il s'agit d' une notation d' URL matricielle , quelque chose que vous n'avez peut-être pas vu auparavant.
La notation Matrix URL est une idée introduite dans une proposition de 1996 du fondateur du Web, Tim Berners-Lee.
Bien que la notation matricielle ne soit jamais entrée dans la norme HTML, elle est légale et est devenue populaire parmi les systèmes de routage de navigateur
pour isoler les paramètres appartenant aux routes parent et enfant. Le routeur est un tel système et prend en charge la notation matricielle sur les navigateurs.
La syntaxe peut sembler étrange pour vous, mais il est peu probable que les utilisateurs le remarquent, tant que l'URL peut être envoyée par courrier électronique
et collée dans une barre d'adresse du navigateur comme celle-ci le peut.