Comment utiliser le routeur.navigateByUrl et routeur.naviguer dans Angulaire
https://angular.io/api/router/RouterLink donne un bon aperçu de la façon de créer des liens qui conduiront l'utilisateur à une route différente dans Angular4, cependant je ne peux pas trouver comment faire la même chose programmatically plutôt besoin de l'utilisateur pour cliquer un lien
2 réponses
navigateByUrl
routerLink directive utilisée comme ceci:
<a [routerLink]="/inbox/33/messages/44">Open Message 44</a>
est juste un wrapper autour de l'impératif de navigation à l'aide de router et son navigateByUrl méthode:
router.navigateByUrl('/inbox/33/messages/44')
comme on peut le voir à partir des sources:
export class RouterLink {
...
@HostListener('click')
onClick(): boolean {
...
this.router.navigateByUrl(this.urlTree, extras);
return true;
}
alors partout où vous avez besoin de naviguer un utilisateur vers une autre route, il suffit d'injecter le router et utiliser navigateByUrl méthode:
class MyComponent {
constructor(router: Router) {
this.router.navigateByUrl(...);
}
}
naviguer
Il y a une autre méthode sur le routeur que vous pouvez utiliser - naviguer:
router.navigate(['/inbox/33/messages/44'])
différence entre les deux
en utilisant
router.navigateByUrlest similaire à changer la barre d'emplacement directement–nous fournissons le" tout " nouvelle URL. Alorsrouter.navigatecrée une nouvelle URL en appliquant un tableau de passés-in commandes, un patch, à L'URL courante.voir clairement la différence, imaginez que l'URL actuelle est
'/inbox/11/messages/22(popup:compose)'.avec ceci URL, appelant
router.navigateByUrl('/inbox/33/messages/44')entraînera'/inbox/33/messages/44'et l'appel d'router.navigate('/inbox/33/messages/44')entraînera'/inbox/33/messages/44(popup:compose)'.
Lire la suite l'officiel docs.
en plus de la réponse fournie, il y a plus de détails à navigate. À partir de la fonction de commentaires:
/**
* 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.
*/
Routeur Guide contient plus de détails sur la navigation programmée.