Como faço para navegar para uma rota primária a partir de uma rota secundária?

Meu problema é bastante clássico. Eu tenho uma parte privada de um aplicativo que está por trás de um login form. Quando o login é bem-sucedido, ele segue para uma rota secundária do aplicativo admin.

Meu problema é que não consigo usar o global navigation menuporque o roteador tenta rotear no meu em AdminComponentvez do meu AppCompoment. Então minha navegação está quebrada.

Outro problema é que, se alguém deseja acessar a URL diretamente, desejo redirecionar para a rota de "login" pai. Mas não consigo fazer funcionar. Parece-me que essas duas questões são semelhantes.

Alguma ideia de como isso pode ser feito?

Você quer um link / HTML ou deseja rotear imperativamente / no código?

Link : A diretiva RouterLink sempre trata o link fornecido como um delta para o URL atual:

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

Com o RouterLink, lembre-se de importar e usar a directivesmatriz:

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

Imperativo : o navigate()método requer um ponto de partida (ou seja, o relativeToparâmetro). Se nenhum for fornecido, a navegação é 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});

Isso parece funcionar para mim a partir da primavera de 2017:

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

Onde seu ctor de componente aceita ActivatedRoutee Router, importado da seguinte maneira:

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

Você pode navegar até sua raiz principal assim

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

Você precisará injetar a rota ativa atual no construtor

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

  }

constructor(private router: Router) {}

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

O roteador suporta

• caminhos absolutos /xxx- iniciado no roteador do componente raiz
• caminhos relativos xxx- iniciado no roteador do componente atual
• caminhos relativos ../xxx- iniciados no roteador pai do componente atual

Para navegar até o componente pai , independentemente do número de parâmetros na rota atual ou na rota pai: Atualização do Angular 6 em 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);

Isso tem a vantagem adicional de ser uma rota absoluta que você pode usar com o roteador singleton.

(Angular 4+ com certeza, provavelmente Angular 2 também.)

Outra maneira poderia ser assim

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

e aqui está o construtor

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

sem muito trabalho:

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

parâmetro '..' torna a navegação um nível acima, ou seja, pai :)

Minhas rotas têm um padrão assim:

• usuário / editar / 1 -> Editar
• usuário / criar / 0 -> Criar
• usuário / -> Lista

Quando estou na página de edição, por exemplo, e preciso voltar para a página da lista, irei retornar 2 níveis acima na rota.

Pensando nisso, criei meu método com um parâmetro "level".

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

Então, para ir da edição à lista, chamo o método assim:

this.goBack(2);

Se você estiver usando a diretiva uiSref, você pode fazer isso

uiSref="^"

Minha solução é:

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

E a Routerinjeção:

private readonly _router: Router

Nada disso funcionou para mim ... Eu tive que usar:

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

private router: Router

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

adicione localização ao seu construtor de @angular/common

constructor(private _location: Location) {}

adicione a função back:

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

e então na sua visão:

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