Jak nawigować do trasy nadrzędnej z trasy podrzędnej?

Mój problem jest dość klasyczny. Mam prywatną część aplikacji, która znajduje się za plikiem login form. Po pomyślnym zalogowaniu następuje przejście do trasy podrzędnej dla aplikacji administratora.

Mój problem polega na tym, że nie mogę użyć, global navigation menuponieważ router próbuje trasować w moim AdminComponentzamiast moim AppCompoment. Więc moja nawigacja jest zepsuta.

Innym problemem jest to, że jeśli ktoś chce uzyskać bezpośredni dostęp do adresu URL, chcę przekierować do nadrzędnej trasy „logowania”. Ale nie mogę sprawić, żeby to zadziałało. Wydaje mi się, że te dwie kwestie są podobne.

Masz jakiś pomysł, jak to zrobić?

Czy chcesz link / HTML, czy chcesz kierować bezwzględnie / w kodzie?

Link : Dyrektywa RouterLink zawsze traktuje podane łącze jako różnicę do bieżącego adresu 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"

W przypadku RouterLink pamiętaj, aby zaimportować i używać directivestablicy:

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

Tryb konieczny : navigate()metoda wymaga punktu początkowego (tj. relativeToParametru). Jeśli nie podano, nawigacja jest bezwzględna:

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

To wydaje się działać dla mnie od wiosny 2017 r .:

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

Tam, gdzie Twój komponent akceptuje ActivatedRoutei Routerimportuje w następujący sposób:

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

W ten sposób możesz przejść do głównego katalogu głównego

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

Będziesz musiał wstrzyknąć bieżącą aktywną trasę do konstruktora

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

  }

constructor(private router: Router) {}

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

Router obsługuje

• ścieżki bezwzględne /xxx- uruchamiane na routerze komponentu głównego
• ścieżki względne xxx- uruchamiane na routerze bieżącego komponentu
• ścieżki względne ../xxx- rozpoczęte na routerze nadrzędnym bieżącego komponentu

Aby nawigować do komponentu nadrzędnego niezależnie od liczby parametrów w bieżącej trasie lub trasie nadrzędnej: Angular 6 aktualizacja 21.01.2019

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

Ma to dodatkową zaletę, że jest trasą absolutną, której można używać z pojedynczym routerem.

(Na pewno Angular 4+, prawdopodobnie też Angular 2.)

Inny sposób mógłby wyglądać tak

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

a oto konstruktor

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

bez zbędnych ceregieli:

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

parametr '..' sprawia , że nawigacja jest o jeden poziom wyżej, czyli rodzic :)

Moje trasy mają następujący wzór:

• użytkownik / edit / 1 -> Edit
• user / create / 0 -> Create
• użytkownik / -> Lista

Na przykład, gdy jestem na stronie edycji i muszę wrócić do strony z listą, wrócę o 2 poziomy wyżej na trasie.

Myśląc o tym, stworzyłem moją metodę z parametrem „level”.

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

Aby przejść od edycji do listy, wywołuję tę metodę:

this.goBack(2);

dodaj lokalizację do konstruktora z @angular/common

constructor(private _location: Location) {}

dodaj funkcję wstecz:

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

a następnie Twoim zdaniem:

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

Jeśli używasz dyrektywy uiSref, możesz to zrobić

uiSref="^"

Moje rozwiązanie to:

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

I Routerwtrysk:

private readonly _router: Router