Comment utiliser le routage Angular5 pour transmettre une valeur

Cette fois, je vais vous montrer comment utiliser Angular5routepass value et quelles sont les précautions pour utiliser la route Angular5 pour transmettre la valeur. un cas pratique. Jetons un coup d’oeil.

Actuellement, Angular a été mis à niveau vers la version stable Angular5. Cette mise à niveau est plus petite, plus rapide et plus stable ! On peut dire que le routage est la partie centrale des applications Angular et même d'une seule page ! Le plus gros inconvénient du routage est qu'il ne peut pas être imbriqué. Ce problème est résolu dans Angular. Le routage dans Angular n'est pas seulement le saut de page, mais aussi celui appelé saut de liste de héros vers les détails du héros ! Créez une page de détails pour chaque héros, afin que les paramètres de routage entrent en jeu ! Identifiez les détails de ce héros grâce aux paramètres transmis par l'itinéraire !

Expliquons maintenant la valeur de routage en détail ! . Premièrement, une façon consiste à transmettre l'identifiant de valeur unique du site officiel pour accéder aux détails, l'autre consiste à transmettre plusieurs données

1. >

et plus C'est un exemple de site officiel

['/hero', hero.id]

 <ul class="items">
  <li *ngFor="let hero of heroes$ | async"
   [class.selected]="hero.id === selectedId">
   <a [routerLink]="[&#39;/hero&#39;, hero.id]">
    <span class="badge">{{ hero.id }}</span>{{ hero.name }}
   </a>
  </li>
 </ul>

Utilisons mon propre exemple pour le présenter :

Le premier est la page de liste et la méthode de saut

Copier le code

Le code est le suivant :

Ensuite, configurez la route : (La méthode de transmission d'une valeur unique doit être configurée dans les détails du routage du composant)

Après la transmission, les paramètres sont obtenus, dans la durée de vie ngOnInit

du composant de détails Période

{
  path:'listDetail/:id',
  component:ListDetailComponent
 },

Obtenir les paramètres

2 Dans nos scénarios commerciaux complexes habituels, nous devons en transférer plusieurs. données, que devons-nous faire à ce moment-là ? À ce stade, nous utilisons queryParams

 ngOnInit() {
  this.route.params
   .subscribe((params: Params) => {
    this.id = params['id'];
    console.log(this.id);
    console.log('传值');
    console.log(params)
   })
 }

Copier le code

Le code est le suivant :

{{data.name}}

Je récupère les données directement ici. Vous pouvez également organiser les données avec un seul paramètre. Mettez-le en place et simplifiez la structure HTML. Il y a maintenant une question : comment configurer de tels paramètres de routage entrant à plusieurs valeurs ? /:id??? Que dois-je faire si mes paramètres ne sont pas corrigés ? En fait, cette méthode ne nécessite pas de configuration ! Il vous suffit de transmettre et d'obtenir des données ! vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

 ngOnInit() {
  this.route.queryParams
   .subscribe((params: Params) => {
    this.id = params['id'];
    this.state = params['state'];
    console.log(params)
    console.log(this.id);
    console.log(this.state);
   })
 }

Comment utiliser JS pour implémenter une animation simple de pliage et de dépliage

Comment utiliser JS pour implémenter animation dégradé de transparence

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!