redireccionar - rutas angular 6

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

Question

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 se realiza correctamente, se dirige a una ruta secundaria para la aplicación de administración.

Mi problema es que no puedo usar el global navigation menu porque el enrutador intenta enrutar mi AdminComponent lugar 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 principal de "inicio de sesión". Pero no puedo hacer que funcione. Me parece que estas dos cuestiones son similares.

¿Alguna idea de cómo se puede hacer?

Answer 1

¿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 matriz de directives :

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

Imperativo : el método de navigate() requiere un punto de partida (es decir, el parámetro relativeTo ). 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});

Answer 2

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

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

Cuando su componente ctor acepta ActivatedRoute y Router , importados de la siguiente manera:

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

Answer 3

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 lista, regresaré 2 niveles 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 editar a lista, llamo al método así:

this.goBack(2);

Answer 4

Otra forma podría ser así

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

y aquí está el constructor

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

Answer 5

Para navegar al componente principal independientemente del número de parámetros en la ruta actual o en 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 también Angular 2).

Answer 6

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

  }

Answer 7

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

constructor(private _location: Location) {}

agregue la función de regreso:

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

y luego en tu opinión:

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

Answer 8

constructor(private router: Router) {}

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

El enrutador admite

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