Résumé des méthodes de transfert de valeur de routage Angular5

Cette fois, je vais vous apporter un résumé de la méthode de transmission de valeur de routage Angular5, et quelles sont les précautions pour la transmission de valeur de routage Angular5. Ce qui suit est 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]

Utilisons mon propre exemple pour le présenter :

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

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

Obtenir les paramètres

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

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 :

Explication détaillée des étapes pour utiliser .vue dans vscode

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

Parcours jQuery des nœuds XML et étapes de mise en œuvre des attributs

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!