it-swarm.com.de

Verwendung von router.navigateByUrl und router.navigate in Angular

https://angular.io/api/router/RouterLink gibt einen guten Überblick darüber, wie Links erstellt werden, die den Benutzer zu einer anderen Route in Angular4 führen. Ich kann jedoch keine Anleitung finden das gleiche programmatisch eher den Benutzer zum Klicken auf einen Link

30
Michael

navigateByUrl

routerLink Direktive wie folgt verwendet:

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

ist nur ein Wrapper um die imperative Navigation mit router und seiner navigateByUrl -Methode:

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

wie aus den Quellen hervorgeht:

export class RouterLink {
  ...

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

Wenn Sie also einen Benutzer zu einer anderen Route navigieren möchten, geben Sie einfach router ein und verwenden Sie die navigateByUrl -Methode:

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

navigieren

Es gibt eine andere Methode auf dem Router, die Sie verwenden können - navigieren :

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

unterschied zwischen den beiden

Die Verwendung von router.navigateByUrl Ähnelt dem direkten Ändern der Adressleiste. Wir geben die "ganze" neue URL an. Während router.navigate Eine neue URL erstellt, indem ein Array von übergebenen Befehlen, ein Patch, auf die aktuelle URL angewendet wird.

Stellen Sie sich vor, die aktuelle URL ist '/inbox/11/messages/22(popup:compose)', um den Unterschied deutlich zu sehen.

Mit dieser URL führt der Aufruf von router.navigateByUrl('/inbox/33/messages/44') zu '/inbox/33/messages/44'. Der Aufruf mit router.navigate(['/inbox/33/messages/44']) führt jedoch zu '/inbox/33/messages/44(popup:compose)'.

Lesen Sie mehr in die offiziellen Dokumente .

Zusätzlich zu der angegebenen Antwort gibt es weitere Details zu navigate. Aus den Kommentaren der Funktion:

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

Das Router-Handbuch enthält weitere Informationen zur programmgesteuerten Navigation.

5
Splaktar