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

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

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

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

Любая идея, как это можно сделать?

ОТВЕТЫ

Ответ 1

Вы хотите ссылку /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});

Ответ 2

Кажется, это работает для меня как Spring 2017:

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

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

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

Ответ 3

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

Ответ 4

Вы можете перейти к своему родительскому корню, как это

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

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

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

  }

Ответ 5

constructor(private router: Router) {}

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

Роутер поддерживает

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

Ответ 6

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

constructor(private _location: Location) {}

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

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

а потом по вашему мнению:

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

Ответ 7

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

  • пользователь /edit/1 → Edit
  • user/create/0 → Create
  • пользователь / -> Список

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

Размышляя об этом, я создал свой метод с параметром "level".

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

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

this.goBack(2);

Ответ 8

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

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

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

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