web-dev-qa-db-fra.com

Utilisation de routerLink et (cliquez) dans le même bouton

Il s'agit d'une meilleure pratique. Est-ce une bonne pratique d'utiliser routerLink et (cliquez) dans le même bouton.

<button routerLink="/link" (click)="back()">

Parce que nous pouvons mettre la logique de navigation du routeur dans la méthode back (), comme ci-dessous,

this.router.navigate(['/link']);

Tout ce que j'ai trouvé à ce sujet, c'est article qui ne parlait pas de la meilleure pratique à suivre. Si l'un est meilleur que l'autre, pouvez-vous en expliquer la raison.

angularangular-ui-router
7
dilantha111

Voici quelques exemples de la façon dont vous pouvez jouer avec routerLink et click,

J'espère que cela vous aidera:

-> Si vous souhaitez rediriger vers certaines pages, vous pouvez toujours utiliser ceci:

<a [routerLink]="['/my-book-listing']"> My Books</a>

-> Si vous souhaitez rediriger vers une page mais que vous souhaitez envoyer des paramètres tels que l'ID, utilisez:

<a [routerLink]="['/my-book-details','3']">Book number 3</a>

-> S'il y a un cas dans lequel vous devez envoyer des paramètres de requête à router, vous pouvez utiliser

<a [routerLink]="['/search-this']" [queryParams]="{text:'sam',category:'social'}">Go Search</a>

-> S'il y a un besoin de logique de code avant de naviguer vers la page, vous devez utiliser

<button (click)="createBook()">Create Book</button>

createBook(bookData){
   // Create Book logic
   this.router.navigate(['/my-book-listing']);
}

-> Vous pouvez également utiliser comme suit, mais pas une bonne pratique, sauf si vous appelez la fonction pour détruire les variables ou enregistrer la page en laissant des données

<button (click)="showLoader()" [routerLink]="['/my-book-listing']">Create Book</button>

showLoader(){
  // showLoader logic
}
11
Sangwin Gawande

Je ne suis pas sûr de la meilleure pratique mais je dirais que c'est bien d'utiliser routerLink et (cliquez) dans le même bouton tant que vous n'interférez pas avec la navigation.

La navigation manuelle via this.router.navigate(['/link']); n'est pas optimale car routerLink gère des choses comme "ouvrir dans un nouvel onglet" alors que l'implémentation de la vôtre à l'aide d'un gestionnaire (de clic) n'est pas souhaitable.

3
Joshua Chan

J'irais pour routerLink quand je dois simplement naviguer par exemple, vers /link

Mais s'il y a une logique à exécuter avant de naviguer, je choisirais click()

Il y a aussi des cas où vous devez passer des paramètres de requête avec la navigation de routage, alors je préférerais également utiliser click()

2
Bhushan Babar