¿Cómo navego a una ruta principal desde una ruta secundaria?

Mi problema es bastante clásico. Tengo una parte privada de una aplicación que está detrás de un login form. Cuando el inicio de sesión es exitoso, se dirige a una ruta secundaria para la aplicación de administración.

Mi problema es que no puedo usar el global navigation menuporque el enrutador intenta enrutar mi en AdminComponentlugar de mi AppCompoment. Entonces mi navegación está rota.

Otro problema es que si alguien quiere acceder a la URL directamente, quiero redirigir a la ruta de "inicio de sesión" principal. Pero no puedo hacer que funcione. Me parece que estas dos cuestiones son similares.

¿Alguna idea de cómo se puede hacer?

¿Quieres un enlace / HTML o quieres enrutar imperativamente / en código?

Enlace : la directiva RouterLink siempre trata el enlace proporcionado como un delta a la URL actual:

[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, recuerde importar y usar la directivesmatriz:

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

Imperativo : el navigate()método requiere un punto de partida (es decir, el relativeToparámetro). Si no se proporciona ninguno, la navegación es absoluta:

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

Esto parece funcionar para mí a partir de la primavera de 2017:

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

Donde su componente ctor acepta ActivatedRoutee Routerimporta de la siguiente manera:

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

Puede navegar a su raíz principal de esta manera

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

Deberá inyectar la ruta activa actual en el constructor

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

  }

constructor(private router: Router) {}

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

El enrutador admite

• rutas absolutas /xxx: iniciadas en el enrutador del componente raíz
• rutas relativas xxx: iniciadas en el enrutador del componente actual
• rutas relativas ../xxx: iniciadas en el enrutador principal del componente actual

Para navegar al componente principal independientemente del número de parámetros en la ruta actual o la ruta principal: Actualización de Angular 6 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);

Esto tiene la ventaja adicional de ser una ruta absoluta que puede usar con el enrutador singleton.

(Angular 4+ seguro, probablemente Angular 2 también).

Otra forma podría ser así

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

y aqui esta el constructor

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

sin mucho preámbulo:

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

el parámetro '..' hace que la navegación suba un nivel, es decir, padre :)

Mis rutas tienen un patrón como este:

• usuario / editar / 1 -> Editar
• usuario / crear / 0 -> Crear
• usuario / -> Lista

Cuando estoy en la página Editar, por ejemplo, y necesito volver a la página de la lista, regresaré 2 niveles arriba en la ruta.

Pensando en eso, creé mi método con un parámetro de "nivel".

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

Entonces, para pasar de la edición a la lista, llamo al método así:

this.goBack(2);

agregue Ubicación a su constructor desde @angular/common

constructor(private _location: Location) {}

agregar la función de retroceso:

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

y luego en tu opinión:

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

Si está utilizando la directiva uiSref, puede hacer esto

uiSref="^"

Mi solucion es:

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

Y la Routerinyección:

private readonly _router: Router