Як перейти до батьківського маршруту з дочірнього маршруту?

Моя проблема досить класична. У мене є приватна частина програми, яка стоїть за 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 -> Редагувати
• user / create / 0 -> Create
• користувач / -> Список

Наприклад, коли я перебуваю на сторінці редагування, і мені потрібно повернутися до сторінки списку, я повернуся на 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