Angular 2 라우터(버전 3)를 사용하여 상대적으로 탐색

Angular 2 라우터(버전 3)를 사용하여 상대적으로 탐색

상대 탐색 방법/questions/123/step1로./questions/123/step2을 사용하는 구성 요소 내에서Router문자열 연결 및 지정 없이/questions/123/?

아래에 답변을 추가했습니다.더 좋은 답을 제안해 주세요. ;-) 더 좋은 방법이 있을 것 같습니다.

조사를 좀 더 해본 후에 저는 우연히 발견하게 되었습니다.

this.router.createUrlTree(['../step2'], {relativeTo: this.activatedRoute});

그리고.

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

첫 번째 접근 방식(Router.createUrlTree API)이 작동하지 않았습니다. 즉, 아무 일도 일어나지 않았습니다.세컨드 어프로치(Router.navigate API)가 작동합니다.

업데이트 2016-10-12

스택 오버플로 질문도 있습니다.

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

업데이트 2016-10-24

설명서:

• 라우팅 및 탐색(상대 탐색)

업데이트 2019-03-08

Angular 7.1에서 변화가 있었던 것 같습니다.Angular 7.1로 해결하는 방법에 대한 답이 또 다른 게시물에 있습니다.https://stackoverflow.com/a/38634440/42659 을 참조하시기 바랍니다.

먼저 시공자에게 router & activatedRoute을 주입합니다.

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

이벤트를 클릭하는 데 사용합니다.

onEditClick(){
        this.router.navigate(['edit'],{relativeTo:this.route});

예상 페이지로 이동합니다.제 시나리오에서는 레시피를 편집하기 위해 레시피 /1을 가고 싶었습니다.http://localhost:4200/http/1/edit

참고: 경로는 대소문자를 구분하기 때문에 케이스를 서로 연결해야 합니다.

Angular 8의 경우 이것이 효과가 있었습니다.
상위 구성요소 / 페이지에서 타이프스크립트를 사용하여 하위 페이지로 이동하려면:

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

부모 모듈에 있는 라우터는 다음과 같습니다.

const routes: Routes = [
  {
    path: '',
    component: MyPage,
    children: [
      { path: 'subPage', component: subPageComponent}
    ]
  }
];

그리고 상위 html 페이지에서 다음을 사용하여 링크를 사용하여 탐색합니다.

<a [routerLink]="'subPage'">Sub Page Link</a>
<router-outlet></router-outlet>

아래와 같이 사용할 수 있습니다.

가정은questions당신의 프라이머리에 로드됩니다.router-outlet

  this.router.navigate([
      '/',
      { 
        outlets: {
          primary: [
              // below may be replaced with different variables
              'questions',
              '123',  
              'step2'
          ]
        }
      }
  ])

도움이 되길 바랍니다!!

언급URL : https://stackoverflow.com/questions/39124906/navigate-relative-with-angular-2-router-version-3