web-dev-qa-db-fra.com

ancre href vs angular routerlink

J'essaie d'utiliser une balise d'ancrage avec href dans mon Angular 7 app. Lorsque je clique sur le lien, l'url change dans le navigateur mais la page n'est pas consultée. Cela fonctionne si je mettez target = "_ self" pour que cela fonctionne

<a href="/abcd" target="_self">Abcd</a>

mais cela ne fonctionne pas seulement les changements d'URL dans le navigateur mais rien ne se passe

<a href="/abcd">Abcd</a>

où comme si j'utilisais Angular et que j'utilise RouterLink cela fonctionne.

<a routerLink="/abcd" routerLinkActive="active">Abcd</a>

Quelqu'un peut-il expliquer le comportement s'il vous plaît.

5
tangokhi

Si vous utilisez href dans l'application angular, évitez-la. Angular a une fonction de routeur où routerLink fait partie de cela.

<p routerLink='/path'>Text</p>

Pour plus de compréhension, consultez cet article Routage angulaire

0
Pramod Patil

Bytech a une bonne réponse mais il y a un cas où vous voudriez utiliser href en angulaire. Par exemple, j'ai une seule application qui contient plusieurs projets. Sur un lien, je veux naviguer du projet de magasin au projet de portail membre. Dans ce cas, car ils sont servis à deux URL de base différentes (dans ce cas pour l'environnement de développement, son localhost: 4201 && localhost: 4202) à l'aide de la liaison de routeur ne vous dirigera pas réellement vers l'autre emplacement de route de base. L'utilisation de href est requise, sinon elle ne vous acheminera pas vers la bonne URL.

0
Jake Stevens

L'utilisation de href directement indique au navigateur d'ouvrir le lien en tant que nouveau , de sorte que l'application sera rechargée et toujours liée à la page exacte pour lequel il a été configuré.

Basé sur le doc , routerLink navigue dans l'application sans recharger à l'aide de l'API interne.

vous pouvez cliquer sur le lien qui utilise href et routerLink pour voir la différence démo

0
Mukundhan