Come si naviga verso un percorso principale da un percorso figlio?

Il mio problema è abbastanza classico. Ho una parte privata di un'applicazione che si trova dietro a login form. Quando l'accesso ha esito positivo, passa a un percorso figlio per l'applicazione di amministrazione.

Il mio problema è che non posso usare global navigation menuperché il router cerca di instradare nel mio AdminComponentinvece che nel mio AppCompoment. Quindi la mia navigazione è interrotta.

Un altro problema è che se qualcuno vuole accedere direttamente all'URL, voglio reindirizzare alla route "login" genitore. Ma non riesco a farlo funzionare. Mi sembra che queste due questioni siano simili.

Qualche idea su come si può fare?

Vuoi un link / HTML o vuoi instradare imperativamente / nel codice?

Collegamento : la direttiva RouterLink tratta sempre il collegamento fornito come un delta rispetto all'URL corrente:

[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"

Con RouterLink, ricordati di importare e utilizzare l' directivesarray:

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

Imperativo : il navigate()metodo richiede un punto di partenza (cioè il relativeToparametro). Se non viene fornito nessuno, la navigazione è assoluta:

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

Questo sembra funzionare per me a partire dalla primavera 2017:

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

Dove il tuo componente ctor accetta ActivatedRoutee Router, importato come segue:

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

Puoi navigare alla radice del tuo genitore in questo modo

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

Dovrai inserire il percorso attivo corrente nel costruttore

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

  }

constructor(private router: Router) {}

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

Il router supporta

• percorsi assoluti /xxx: avviati sul router del componente root
• percorsi relativi xxx- avviati sul router del componente corrente
• percorsi relativi ../xxx: avviati sul router principale del componente corrente

Per navigare al componente genitore indipendentemente dal numero di parametri nella rotta corrente o nella rotta genitore: 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);

Questo ha il vantaggio di essere un percorso assoluto che puoi utilizzare con il router singleton.

(Angular 4+ di sicuro, probabilmente anche Angular 2.)

Un altro modo potrebbe essere così

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

ed ecco il costruttore

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

senza molto rumore:

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

il parametro ".." fa salire di livello la navigazione, ovvero genitore :)

I miei percorsi hanno uno schema come questo:

• utente / modifica / 1 -> Modifica
• utente / crea / 0 -> Crea
• utente / -> Elenco

Quando sono nella pagina Modifica, ad esempio, e devo tornare alla pagina dell'elenco, tornerò di 2 livelli in alto sul percorso.

Pensando a questo, ho creato il mio metodo con un parametro "level".

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

Quindi, per passare dalla modifica all'elenco chiamo il metodo in questo modo:

this.goBack(2);

Se stai usando la direttiva uiSref, puoi farlo

uiSref="^"

La mia soluzione è:

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

E l' Routeriniezione:

private readonly _router: Router

Niente di tutto questo ha funzionato per me ... ho dovuto usare:

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

private router: Router

this.router.navigate([this.router.url.substring(0, this.router.url.lastIndexOf('/'))]);

aggiungi Location al tuo costruttore da @angular/common

constructor(private _location: Location) {}

aggiungi la funzione back:

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

e poi a tuo avviso:

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