Как перейти к родительскому маршруту из дочернего маршрута?

Моя проблема вполне классическая. У меня есть личная часть приложения, которая находится за файлом login form. При успешном входе в систему он переходит на дочерний маршрут для приложения администратора.

Моя проблема в том, что я не могу использовать, global navigation menuпотому что маршрутизатор пытается маршрутизировать в моем, AdminComponentа не в моем AppCompoment. Так что у меня сломана навигация.

Другая проблема заключается в том, что если кто-то хочет получить доступ к URL напрямую, я хочу перенаправить на родительский маршрут «входа в систему». Но я не могу заставить его работать. Мне кажется, что эти две проблемы похожи.

Есть идеи, как это можно сделать?

Вам нужна ссылка / HTML или вы хотите выполнить императивную маршрутизацию / в коде?

Ссылка : директива RouterLink всегда рассматривает предоставленную ссылку как дельту к текущему 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"

С RouterLink не забудьте импортировать и использовать directivesмассив:

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

Императив : navigate()метод требует отправной точки (то есть, relativeToпараметр). Если ничего не указано, навигация будет абсолютной:

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

Кажется, это работает для меня весной 2017 года:

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

Если ваш компонент ctor принимает ActivatedRouteи Routerимпортируется следующим образом:

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

Вы можете перейти к родительскому корню следующим образом

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

Вам нужно будет ввести текущий активный маршрут в конструктор

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

  }

constructor(private router: Router) {}

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

Маршрутизатор поддерживает

• абсолютные пути /xxx- запускаются на маршрутизаторе корневого компонента
• относительные пути xxx- запущены на маршрутизаторе текущего компонента
• относительные пути ../xxx- запущены на родительском маршрутизаторе текущего компонента

Чтобы перейти к родительскому компоненту независимо от количества параметров в текущем маршруте или родительском маршруте: Обновление Angular 6 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);

Это дает дополнительный бонус в виде абсолютного маршрута, который вы можете использовать с одноэлементным маршрутизатором.

(Angular 4+ наверняка, возможно, Angular 2 тоже.)

Другой способ мог быть таким

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

а вот конструктор

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

без лишних слов:

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

параметр '..' делает навигацию на один уровень выше, т.е. родительский :)

Мои маршруты имеют такую ​​схему:

• пользователь / редактировать / 1 -> Изменить
• пользователь / создать / 0 -> Создать
• пользователь / -> Список

Например, когда я нахожусь на странице редактирования и мне нужно вернуться на страницу списка, я вернусь на 2 уровня вверх по маршруту.

Подумав об этом, я создал свой метод с параметром «уровень».

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

Итак, чтобы перейти от редактирования к списку, я вызываю такой метод:

this.goBack(2);

добавить Location в свой конструктор из @angular/common

constructor(private _location: Location) {}

добавить функцию возврата:

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

а затем, на ваш взгляд:

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

Если вы используете директиву uiSref, вы можете сделать это

uiSref="^"

Мое решение:

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

И Routerинъекция:

private readonly _router: Router