형제 경로로 이동하려면 어떻게 해야 합니까?

형제 경로로 이동하려면 어떻게 해야 합니까?

내가 이 라우터 구성을 받았다고 가정해 보겠습니다.

export const EmployeeRoutes = [
   { path: 'sales', component: SalesComponent },
   { path: 'contacts', component: ContactsComponent }
];

그리고 그 곳으로 항해를 했습니다.SalesComponent이 URL을 통해

/department/7/employees/45/sales

이제 가보고 싶습니다.contacts, 하지만 제가 절대 경로에 대한 모든 매개 변수(예: 부서 ID)를 가지고 있지 않기 때문에,7위의 예에서) 상대적인 링크를 사용하여 거기에 도달하고 싶습니다. 예를 들어.

[routerLink]="['../contacts']"

아니면

this.router.navigate('../contacts')

불행하게도 작동이 안 돼요명백한 해결책이 있을지도 모르지만 저는 그것을 보지 못합니다.누구 도와줄 사람 있습니까?

새 라우터(3.0.0-beta2)를 사용하는 경우 ActivatedRoute를 사용하여 다음과 같이 상대 경로로 이동할 수 있습니다.

constructor(private router: Router, private r:ActivatedRoute) {} 

///
// DOES NOT WORK SEE UPDATE
goToContact() {
  this.router.navigate(["../contacts"], { relativeTo: this.r });
}

업데이트 08/02/2019 각7.1.0

current route: /department/7/employees/45/sales

the old version will do: /department/7/employees/45/sales/contacts

@Karnaille의 의견에 따르면 위의 내용은 최신 라우터에서는 작동하지 않습니다.새로운 방법은 다음을 추가하는 것입니다..parent로.this.r그렇게

    // Working(08/02/2019) 
    // DOES NOT WORK SEE UPDATE
    goToContact() {
       this.router.navigate(["../contacts"], { relativeTo: this.r.parent });
    }

the update will do: /department/7/employees/45/contacts

업데이트 12/12/2021 각도 > 10

@ziz194가 언급한 것처럼, 지금은 이렇게 작동합니다.

constructor(private router: Router, private r:ActivatedRoute) {} 

goToContact() {
  this.router.navigate(["contacts"], { relativeTo: this.r });
}

RouterLink 지시문은 항상 제공된 링크를 현재 URL에 대한 델타로 취급합니다.

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../sibling;abc=xyz
[routerLink]="['../sibling', {abc: 'xyz'}]"
// with query param and fragment   ../sibling?p1=value1&p2=v2#frag
[routerLink]="['../sibling']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

그navigate()메소드는 시작점이 필요합니다(즉,relativeTo파라미터).제공되지 않을 경우 내비게이션은 절대적인 상태가 됩니다.

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     ../sibling;abc=xyz
this.router.navigate(["../sibling", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../sibling?p1=value1&p2=v2#frag
this.router.navigate(["../sibling"], {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// RC.5+: navigate without updating the URL 
this.router.navigate(["../sibling"], {relativeTo: this.route, skipLocationChange: true});

저는 다음과 같이 시도해 보았는데 효과가 있었습니다.

this.router.navigate(["contacts"], { relativeTo: this.r.parent });

어떤 이유에서인지, 아마도 같은 시각에 있는 복수의 아울렛과 관련이 있을 수도 있지만, 저는 목표로 삼아야만 했습니다.this.activatedRoute.parent.parent(매우 불편함) 또는 현재 보기를 대상으로 하고 이중 점 경로를 사용합니다.

    this.router.navigate(['..', "contacts"], { relativeTo: this.activatedRoute });

언급URL : https://stackoverflow.com/questions/38634237/how-do-i-navigate-to-a-sibling-route