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

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

Mein Problem ist, dass ich das nicht verwenden kann, global navigation menuweil der Router versucht, in meinem AdminComponentstatt in meinem zu routen AppCompoment. Meine Navigation ist also kaputt.

Ein weiteres Problem ist, dass ich, wenn jemand direkt auf die URL zugreifen möchte, zur übergeordneten "Anmelderoute" 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?

Möchten Sie einen Link / HTML oder möchten Sie zwingend / in Code routen?

Link : Die RouterLink-Direktive behandelt den bereitgestellten 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 directivesArray zu importieren und zu verwenden :

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

Imperativ : Die navigate()Methode erfordert einen Startpunkt (dh den relativeToParameter). 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});

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

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

Wo Ihre Komponente ctor akzeptiert ActivatedRouteund Routerwie folgt importiert:

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

Sie können so zu Ihrem übergeordneten Stamm 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) {

  }

constructor(private router: Router) {}

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

Der Router unterstützt

• absolute Pfade /xxx- gestartet auf dem Router der Root-Komponente
• relative Pfade xxx- gestartet auf dem Router der aktuellen Komponente
• relative Pfade ../xxx- gestartet auf dem übergeordneten Router der aktuellen Komponente

So navigieren Sie zur übergeordneten Komponente, unabhängig von der Anzahl der Parameter in der aktuellen Route oder der übergeordneten Route: Angular 6-Update 21.01.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 auch Angular 2.)

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
  ) { }

ohne viel Aufhebens:

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

Parameter '..' macht die Navigation eine Ebene höher, dh Eltern :)

Meine Routen haben ein Muster wie das folgende:

• Benutzer / bearbeiten / 1 -> Bearbeiten
• user / create / 0 -> Erstellen
• Benutzer / -> Liste

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

Als ich darüber nachdachte, erstellte ich meine Methode mit einem "Level" -Parameter.

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);

Fügen Sie Ihrem Konstruktor den Speicherort von hinzu @angular/common

constructor(private _location: Location) {}

Fügen Sie die Rückfunktion hinzu:

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

und dann aus Ihrer Sicht:

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

Wenn Sie die uiSref-Direktive verwenden, können Sie dies tun

uiSref="^"

Meine Lösung ist:

const urlSplit = this._router.url.split('/');
this._router.navigate([urlSplit.splice(0, urlSplit.length - 1).join('/')], { relativeTo: this._route.parent });

Und die RouterInjektion:

private readonly _router: Router