Cómo usar router.navigateByUrl y router.navigate en Angular

Solución:

navigateByUrl

routerLink directiva como se usa así:

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

es solo un resumen de la navegación imperativa mediante router y su método navigateByUrl:

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

como se puede ver en las fuentes:

export class RouterLink {
  ...

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

Entonces, donde sea que necesite llevar a un usuario a otra ruta, simplemente inyecte el router y use navigateByUrl método:

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

navegar

Hay otro método en el enrutador que puede usar: navegar:

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

diferencia entre los dos

Utilizando router.navigateByUrl es similar a cambiar la barra de ubicación directamente: proporcionamos la URL “completamente” nueva. Mientras que
router.navigate crea una nueva URL aplicando una serie de comandos pasados, un parche, a la URL actual.

Para ver la diferencia claramente, imagine que la URL actual es
'/inbox/11/messages/22(popup:compose)'.

Con esta URL, llamando
router.navigateByUrl('/inbox/33/messages/44') resultará en
'/inbox/33/messages/44'. Pero llamándolo con
router.navigate(['/inbox/33/messages/44']) resultará en
'/inbox/33/messages/44(popup:compose)'.

Leer más en los documentos oficiales.

Además de la respuesta proporcionada, hay más detalles para navigate. De los comentarios de la función:

/**
 * 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.
 */

La Guía del enrutador tiene más detalles sobre la navegación programática.

router.navigate vs router.navigateByUrl

router.navigate es solo un método de conveniencia que envuelve router.navigateByUrl, se reduce a:

navigate(commands: any[], extras) {
    return router.navigateByUrl(router.createUrlTree(commands, extras), extras);
}

Como se menciona en otras respuestas router.navigateByUrl solo aceptará URL absolutas:

// This will work
router.navigateByUrl("http://localhost/team/33/user/11")
// This WON'T work even though relativeTo parameter is in the signature
router.navigateByUrl("../22", {relativeTo: route})

Todos los cálculos relativos se realizan mediante router.createUrlTree y router.navigate. La sintaxis de matriz se utiliza para tratar cada elemento de matriz como un “comando” de modificación de URL. P.ej ".." – sube, "path" – bajar, {expand: true} – agregar parámetro de consulta, etc. Puede usarlo así:

// create /team/33/user/11
router.navigate(['/team', 33, 'user', 11]);

// assuming the current url is `/team/33/user/11` and the route points to `user/11`

// navigate to /team/33/user/11/details
router.navigate(['details'], {relativeTo: route});

// navigate to /team/33/user/22
router.navigate(['../22'], {relativeTo: route});

// navigate to /team/44/user/22
router.navigate(['../../team/44/user/22'], {relativeTo: route});

Ese {relativeTo: route} El parámetro es importante ya que eso es lo que el enrutador usará como raíz para las operaciones relativas.

Consígalo a través del constructor de su componente:

  // In my-awesome.component.ts:

  constructor(private route: ActivatedRoute, private router: Router) {}
  
  // Example call
  onNavigateClick() {
    // Navigates to a parent component
    this.router.navigate([..], { relativeTo: this.route })
  }

directiva routerLink

Lo mejor de esta directiva es que recuperará el ActivatedRoute para ti. Debajo del capó ya está usando familiar:

router.navigateByUrl(router.createUrlTree(commands, { relativeTo: route }), { relativeTo: route });

Las siguientes variantes producirán un resultado idéntico:

[routerLink]="['../..']"

// if the string parameter is passed it will be wrapped into an array
routerLink="../.."

---

---

Utiliza Nuestro Buscador