angular

절대 경로 라우팅

탐색에는 두 가지 방법이 .navigate()있으며.navigateByUrl()

.navigateByUrl()절대 경로 라우팅 방법 을 사용할 수 있습니다 .

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

constructor(private router: Router) {}

navigateToLogin() {
   this.router.navigateByUrl('/login');
}

탐색하려는 구성 요소의 URL에 대한 절대 경로를 입력하십시오.

참고 : 라우터의 navigateByUrl메소드를 호출 할 때는 항상 완전한 절대 경로를 지정하십시오 . 절대 경로는 선행으로 시작해야합니다/

// Absolute route - Goes up to root level    
this.router.navigate(['/root/child/child']);

// Absolute route - Goes up to root level with route params   
this.router.navigate(['/root/child', crisis.id]);

상대 경로 라우팅

상대 경로 라우팅을 사용하려면 .navigate()방법을 사용하십시오 .

참고 : 라우팅, 특히 부모, 형제 및 자식 경로가 작동하는 방식은 약간 직관적이지 않습니다.

// Parent route - Goes up one level 
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });

// Sibling route - Stays at the current level and moves laterally, 
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });

// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });

// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });

// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'. 
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });

또는 현재 경로 경로 내에서 탐색해야하지만 다른 경로 매개 변수로 탐색해야하는 경우 :

// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });

링크 파라미터 배열

링크 매개 변수 배열에는 라우터 탐색을위한 다음과 같은 구성 요소가 있습니다.

• 대상 구성 요소로의 경로입니다. ['/hero']
• 라우트 URL로 이동하는 필수 및 선택적 라우트 매개 변수 ['/hero', hero.id]또는['/hero', { id: hero.id, foo: baa }]

디렉토리와 같은 구문

라우터는 경로 이름 조회를 안내하기 위해 링크 매개 변수 목록에서 디렉토리와 같은 구문을 지원합니다.

./ 또는 선행 슬래시가 현재 레벨과 관련이 없습니다.

../ 경로 경로에서 한 수준 위로 올라갑니다.

상대 탐색 구문을 상위 경로와 결합 할 수 있습니다. 형제 경로로 이동해야하는 경우 ../<sibling>규칙을 사용하여 한 수준 위로 올라간 다음 형제 경로 경로 위아래로 이동할 수 있습니다 .

상대 nagivation에 대한 중요 사항

Router.navigate메소드 를 사용하여 상대 경로를 탐색하려면 ActivatedRoute현재 라우트 트리의 현재 위치를 라우터에 제공하기 위해를 제공 해야 합니다.

링크 매개 변수 배열 뒤에 relativeTo속성이로 설정된 객체를 추가 하십시오 ActivatedRoute. 그런 다음 라우터는 활성 경로의 위치를 ​​기준으로 대상 URL을 계산합니다.

공식 Angular Router 문서에서

답변

this.router.parent.navigate(['/About']);

{ path:'/About', name: 'About',   ... }

this.router.parent.navigate(['About']);

{path:'/about',    name: 'About',   component: AboutComponent}

goToAboutPage() {
    this.router.navigate(['About']); // here "About" is name not path
}

{path:'about', component: AboutComponent}

goToAboutPage() {
    this.router.navigate(['/about']); // here "About" is path
}

import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');

GOTO(ri) {
    this.router.navigate(this.ngRoutes[ri]);
}