webentwicklung-frage-antwort-db.com.de

Wie navigiere ich von einer untergeordneten Route zu einer übergeordneten Route?

Mein Problem ist ganz klassisch. Ich habe einen privaten Teil einer Anwendung, der sich hinter einem login form Befindet. Wenn die Anmeldung erfolgreich ist, wird eine untergeordnete Route für die Administratoranwendung aufgerufen.

Mein Problem ist, dass ich den global navigation menu Nicht verwenden kann, da der Router versucht, in meinem AdminComponent anstelle meines AppCompoment zu routen. Also ist meine Navigation kaputt.

Ein weiteres Problem ist, dass, wenn jemand direkt auf die URL zugreifen möchte, ich zur übergeordneten "Login" -Route umleiten möchte. Aber ich kann es nicht zum Laufen bringen. Mir scheint, dass diese beiden Themen ähnlich sind.

Irgendeine Idee, wie es gemacht werden kann?

angularangular-routingangular-router
59
Carl Boisvert

Möchten Sie einen Link/HTML-Code oder möchten Sie unbedingt/im Code weiterleiten?

Link: Die RouterLink-Direktive behandelt den angegebenen Link immer als Delta zur aktuellen URL:

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../../parent;abc=xyz
[routerLink]="['../../parent', {abc: 'xyz'}]"
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
[routerLink]="['../../parent']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

Denken Sie bei RouterLink daran, das Array directives zu importieren und zu verwenden:

import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    directives: [ROUTER_DIRECTIVES],

Imperativ: Die Methode navigate() erfordert einen Startpunkt (d. H. Den Parameter relativeTo). Wenn keine angegeben ist, ist die Navigation absolut:

import { Router, ActivatedRoute } from '@angular/router';
...
constructor(private router: Router, private route: ActivatedRoute) {}
...
this.router.navigate(["/absolute/path"]);
this.router.navigate(["../../parent"], {relativeTo: this.route});
this.router.navigate(["../sibling"],   {relativeTo: this.route});
this.router.navigate(["./child"],      {relativeTo: this.route}); // or
this.router.navigate(["child"],        {relativeTo: this.route});

// with route param     ../../parent;abc=xyz
this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
this.router.navigate(["../../parent"], {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// navigate without updating the URL 
this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});
115
Mark Rajcok

Dies scheint für mich ab Frühjahr 2017 zu funktionieren:

goBack(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

Wobei Ihre Komponente ctor ActivatedRoute und Router akzeptiert, die wie folgt importiert werden:

import { ActivatedRoute, Router } from '@angular/router';

33
ne1410s

Sie können auf diese Weise zu Ihrem übergeordneten Stammverzeichnis navigieren

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

Sie müssen die aktuell aktive Route in den Konstruktor einfügen

constructor(
    private router: Router,
    private activeRoute: ActivatedRoute) {

  }
11
Chris Lamothe

So navigieren Sie zum übergeordneten Element Komponente, unabhängig von der Anzahl der Parameter in der aktuellen Route oder der übergeordneten Route: Angular 6 Update 1/21/19

   let routerLink = this._aRoute.parent.snapshot.pathFromRoot
        .map((s) => s.url)
        .reduce((a, e) => {
            //Do NOT add last path!
            if (a.length + e.length !== this._aRoute.parent.snapshot.pathFromRoot.length) {
                return a.concat(e);
            }
            return a;
        })
        .map((s) => s.path);
    this._router.navigate(routerLink);

Dies hat den zusätzlichen Vorteil, dass es sich um eine absolute Route handelt, die Sie mit dem Singleton Router verwenden können.

(Angular 4+ sicher, wahrscheinlich Angular 2 auch.)

6
kayjtea
constructor(private router: Router) {}

navigateOnParent() {
  this.router.navigate(['../some-path-on-parent']);
}

Der Router unterstützt

  • absolute Pfade /xxx - auf dem Router der Root-Komponente gestartet
  • relative Pfade xxx - auf dem Router der aktuellen Komponente gestartet
  • relative Pfade ../xxx - wurde auf dem übergeordneten Router der aktuellen Komponente gestartet
4
Günter Zöchbauer

füge Location aus @angular/common zu deinem Konstruktor hinzu

constructor(private _location: Location) {}

füge die back Funktion hinzu:

back() {
  this._location.back();
}

und dann aus Ihrer Sicht:

<button class="btn" (click)="back()">Back</button>
1
user3021615

Ein anderer Weg könnte so sein

this._router.navigateByUrl(this._router.url.substr(0, this._router.url.lastIndexOf('/'))); // go to parent URL

und hier ist der Konstruktor

constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }
1
Johansrk

Meine Routen haben folgendes Muster:

  • user/edit/1 -> Bearbeiten
  • user/create/0 -> Erstellen
  • benutzer/-> Liste

Wenn ich zum Beispiel auf Seite bearbeiten bin und zur Listenseite zurückkehren muss, kehre ich auf der Route 2 Ebenen zurück.

In diesem Sinne habe ich meine Methode mit einem "Level" -Parameter erstellt.

goBack(level: number = 1) {
    let commands = '../';
    this.router.navigate([commands.repeat(level)], { relativeTo: this.route });
}

Um von der Bearbeitung zur Liste zu gelangen, rufe ich die Methode folgendermaßen auf:

this.goBack(2);
0
Carlinhos