Angular 2-this.router.parent.navigate ( '/ about')를 사용하여 다른 경로로 이동하는 방법?

Angular 2 –를 사용하여 다른 경로로 이동하는 방법 this.router.parent.navigate('/about').

작동하지 않는 것 같습니다. 나는 location.go("/about");그것이 효과가 없었던 것처럼 노력 했다.

기본적으로 사용자가 로그인하면 다른 페이지로 리디렉션하고 싶습니다.

아래 코드는 다음과 같습니다.

 import {Component} from 'angular2/angular2';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
 import {Router} from 'angular2/router';

 import {AuthService} from '../../authService';

 //Model
 class User {
   constructor(public email: string, public password: string) {}
 }

 @Component({
   templateUrl:'src/app/components/todo/todo.html',
   directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
 })

 export class Todo {   
     model = new User('Mark@gmail.com', 'Password'); 
     authService:AuthService;
     router: Router;

   constructor(_router: Router, _authService: AuthService){   
       this.authService = _authService;
       this.router = _router;
   }

   onLogin = () => {
       this.authService.logUserIn(this.model).then((success) => {      

          //This is where its broke - below:          
          this.router.parent.navigate('/about');

       });
   }
 }

절대 경로 라우팅

탐색에는 두 가지 방법이 .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']);

없이도 사용할 수 있습니다 parent

라우터 정의를 말하십시오 :

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

다음 name대신에 탐색 할 수 있습니다path

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

V2.3.0 용으로 업데이트

v2.0 이름 에서 라우팅 특성에 더 이상 존재하지 않습니다. 이름 속성 없이 경로를 정의 합니다. 따라서 name 대신 path 를 사용해야합니다 . 그리고 더 슬래시 경로 때문에 사용하지 않는 대신this.router.navigate(['/path'])path: 'about'path: '/about'

라우터 정의 :

{path:'about', component: AboutComponent}

다음으로 탐색 할 수 있습니다 path

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');

개인적으로, 나는 우리가 ngRoutes컬렉션 (긴 이야기)을 유지하기 때문에 가장 즐거움을 느낀다는 것을 발견했습니다.

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

나는 실제로 인터뷰 질문 중 하나의 일부로 사용합니다. 이런 식으로, 나는 누가 GOTO(1)홈페이지 재 지정에 뛰어 들었을 때 누가 삐걱 거리는지를 보면서 영원히 발전하고있는 사람을 거의 즉각적으로 읽을 수있다 .