Angular+RouterLink fait différents sauts fantaisistes

Cette fois, je vais vous proposer Angular+RouterLink pour faire différents sauts fantaisistes. Quelles sont les précautions pour qu'Angular+RouterLink fasse des sauts fantaisistes. temps.

Préface

En plus d'utiliser la méthode naviguer() de Router pour changer d'itinéraire, Angular2 fournit également une commande pour convertir un DOM L'objet est amélioré en tant qu'entrée de routage :

@View({
directives:[RouterOutlet,RouterLink]
template : `<nav>
<b router-link="video">video</b> | 
<b router-link="music">music</b>
</nav>
<router-outlet></router-outlet>`
})

La directive RouterLink ajoute un écouteur click event à l'objet DOM hôte et appelle la méthode naviguer() du routeur pour le routage lorsqu'elle est déclenchée .

Cependant, cet article présente principalement le contenu pertinent sur le saut fantaisie RouterLink d'Angular. Il est partagé pour la référence et l'apprentissage de chacun. Je ne dirai pas grand-chose ci-dessous, jetons un coup d'œil à l'introduction détaillée.

routerLink lui-même prend en charge deux méthodes d'écriture :

<a routerLink="detail">
</a>
<a [routerLink]="[&#39;detail&#39;]">
</a>

Quelles sont les méthodes d'écriture pour la valeur de routerLink et quelles sont les différences ?

Supposons que l'itinéraire actuel est

`http://localhost:4200/#/doc/license`

Écrit 1 : Chemin absolu / + nom de l'itinéraire

 <!--跳到 http://localhost:4200/#/doc/license -->
 <a [routerLink]="[&#39;/doc/demo&#39;]" >跳呀跳</a>
 
 <!--跳到 http://localhost:4200/#/demo -->
 <a [routerLink]="[&#39;/demo&#39;]" >跳呀跳</a>

Alors l'url est

Alors l'url est Sauter sur http://localhost:4200/#/doc/demo, c'est-à-dire http://localhost:4200/#/ + le chemin absolu auquel vous souhaitez accéder.

 <a [routerLink]="[&#39;demo&#39;]" >跳呀跳</a>

Écrit 2 : Un nom de routage nom de routage

Ensuite l'url est http://localhost:4200/#/doc/license/(demo) , C'est-à-dire http://localhost:4200/#/doc/license + le chemin absolu vers lequel vous souhaitez accéder. À ce moment, cela ajoutera quelque chose à votre itinéraire pour devenir /(demo), et le saut ne se fera pas. travail.

 <a [routerLink]="[&#39;../demo&#39;]" >跳呀跳</a>

Méthode d'écriture 3 : chemin relatif../nom de la route

Ensuite, l'url est http://localhost:4200/ #/ doc/demo, c'est-à-dire http://localhost:4200/#/doc + le chemin relatif auquel vous souhaitez accéder. Il commencera à regarder le niveau précédent.

 <a [routerLink]="[&#39;./demo&#39;]" >跳呀跳</a>

Méthode d'écriture 4 : ./nom de la route, c'est-à-dire l'itinéraire actuel + l'itinéraire que vous avez écrit pour y accéder

Je crois que vous l'avez maîtrisé après avoir lu le cas dans cet article. Pour des méthodes 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 implémenter l'animation de chute de flocon de neige en JS

Comment implémenter la réutilisation des ports fonction dans Node.Js

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!