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

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

상대 경로 라우팅

If you want to use relative path routing, use the .navigate() method.

NOTE: It's a little unintuitive how the routing works, particularly parent, sibling, and child routes:

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

Or if you just need to navigate within the current route path, but to a different route parameter:

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

Link parameters array

A link parameters array holds the following ingredients for router navigation:

• The path of the route to the destination component. ['/hero']
• Required and optional route parameters that go into the route URL. ['/hero', hero.id] or ['/hero', { id: hero.id, foo: baa }]

Directory-like syntax

The router supports directory-like syntax in a link parameters list to help guide route name lookup:

./ or no leading slash is relative to the current level.

../ to go up one level in the route path.

You can combine relative navigation syntax with an ancestor path. If you must navigate to a sibling route, you could use the ../<sibling> convention to go up one level, then over and down the sibling route path.

Important notes about relative nagivation

To navigate a relative path with the Router.navigate method, you must supply the ActivatedRoute to give the router knowledge of where you are in the current route tree.

After the link parameters array, add an object with a relativeTo property set to the ActivatedRoute. The router then calculates the target URL based on the active route's location.

From official Angular Router Documentation

---

You should use

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

As well as specifying the route path, you can also specify your route's name:

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

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

---

Also can use without parent

say router definition like:

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

then can navigate by name instead of path

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

Updated for V2.3.0

In Routing from v2.0 name property no more exist. route define without name property. so you should use path instead of name. this.router.navigate(['/path']) and no leading slash for path so use path: 'about' instead of path: '/about'

router definition like:

{path:'about', component: AboutComponent}

then can navigate by 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');

---

Personally, I found that, since we maintain a ngRoutes collection (long story) i find the most enjoyment from:

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

I actually use it as part of one of our interview questions. This way, I can get a near-instant read at who's been developing forever by watching who twitches when they run into GOTO(1) for Homepage redirection.

참고URL : https://stackoverflow.com/questions/33571605/angular-2-how-to-navigate-to-another-route-using-this-router-parent-navigate