web-dev-qa-db-fra.com

Comment utiliser router.navigateByUrl et router.navigate dans Angular

https://angular.io/api/router/RouterLink donne un bon aperçu de la création de liens menant l'utilisateur à une autre route dans Angular4, mais je ne trouve pas comment faire. la même chose par programme nécessitant plutôt que l'utilisateur clique sur un lien

angularroutesrouterlink
30
Michael

naviguerByUrl

routerLink directive utilisée de la manière suivante:

<a [routerLink]="/inbox/33/messages/44">Open Message 44</a>

est juste un wrapper autour de la navigation impérative utilisant router et sa méthode browseByUrl :

router.navigateByUrl('/inbox/33/messages/44')

comme on peut le voir d'après les sources:

export class RouterLink {
  ...

  @HostListener('click')
  onClick(): boolean {
    ...
    this.router.navigateByUrl(this.urlTree, extras);
    return true;
  }

Ainsi, chaque fois que vous avez besoin de diriger un utilisateur vers un autre itinéraire, injectez simplement la méthode router et utilisez la méthode navigateByUrl:

class MyComponent {
   constructor(router: Router) {
      this.router.navigateByUrl(...);
   }
}

naviguer; diriger

Il existe une autre méthode sur le routeur que vous pouvez utiliser - naviguer :

router.navigate(['/inbox/33/messages/44'])

différence entre les deux

Utiliser router.navigateByUrl revient à changer directement la barre d’emplacement: nous fournissons la nouvelle URL "entière". Attendu que router.navigate crée une nouvelle URL en appliquant un tableau de commandes transmises, un correctif, à l'URL actuelle.

Pour voir clairement la différence, imaginons que l'URL actuelle est '/inbox/11/messages/22(popup:compose)'.

Avec cette URL, appeler router.navigateByUrl('/inbox/33/messages/44') aura pour résultat '/inbox/33/messages/44'. Mais l'appelant avec router.navigate(['/inbox/33/messages/44']) aura pour résultat '/inbox/33/messages/44(popup:compose)'.

Plus d'informations dans les documents officiels .

60
Max Koretskyi aka Wizard

En plus de la réponse fournie, il y a plus de détails dans navigate. A partir des commentaires de la fonction:

/**
 * Navigate based on the provided array of commands and a starting point.
 * If no starting route is provided, the navigation is absolute.
 *
 * Returns a promise that:
 * - resolves to 'true' when navigation succeeds,
 * - resolves to 'false' when navigation fails,
 * - is rejected when an error happens.
 *
 * ### Usage
 *
 * ```
 * router.navigate(['team', 33, 'user', 11], {relativeTo: route});
 *
 * // Navigate without updating the URL
 * router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});
 * ```
 *
 * In opposite to `navigateByUrl`, `navigate` always takes a delta that is applied to the current
 * URL.
 */

Le Guide du routeur contient plus de détails sur la navigation par programmation.

5
Splaktar