하위 경로에서 상위 경로로 어떻게 이동합니까?

내 문제는 아주 고전적입니다. 나는 뒤에있는 응용 프로그램의 비공개 부분이 login form있습니다. 로그인이 성공하면 관리 응용 프로그램의 하위 경로로 이동합니다.

내 문제는 global navigation menu라우터가 내 AdminComponent.NET 대신 내 라우팅을 시도하기 때문에을 사용할 수 없다는 것입니다 AppCompoment. 그래서 내 탐색이 깨졌습니다.

또 다른 문제는 누군가 URL에 직접 액세스하려는 경우 상위 "로그인"경로로 리디렉션하고 싶다는 것입니다. 그러나 나는 그것을 작동시킬 수 없습니다. 이 두 가지 문제가 비슷한 것 같습니다.

어떻게 할 수 있는지 아십니까?

링크 / HTML을 원하시나요? 아니면 명령 적 / 코드로 라우팅 하시겠습니까?

Link : 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 업데이트 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);

이것은 싱글 톤 라우터와 함께 사용할 수있는 절대 경로라는 추가 보너스가 있습니다.

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

매개 변수 '..' 는 탐색을 한 단계 위로 만듭니다 . 즉, 상위 :)

내 경로에는 다음과 같은 패턴이 있습니다.

• user / edit / 1-> 편집
• 사용자 / 만들기 / 0-> 만들기
• 사용자 /-> 목록

예를 들어 편집 페이지에 있고 목록 페이지로 돌아 가야하는 경우 경로에서 2 단계 위로 돌아갑니다.

그것에 대해 생각하면서 "레벨"매개 변수로 메서드를 만들었습니다.

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

따라서 편집에서 목록으로 이동하려면 다음과 같은 메서드를 호출합니다.

this.goBack(2);

생성자에 위치 추가 @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