Angular 2 - How to switch to another route using this.router.parent.navigate ('/ about')

Question

Angular 2 - How to switch to another route using this.router.parent.navigate ('/ about').

It does not seem to work. I tried location.go ("/ about"); since it did not work.

basically after the user logs in I want to redirect them to another page.

Here is my code below:

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('[e-mail]', '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'); }); } } 

Thank you in advance!

Answer 1

Absolute Path Routing

There are two navigation methods: .navigate() and .navigateByUrl()

You can use the .navigateByUrl() method to absolutely route the route:

 import {Router} from '@angular/router'; this.router= Router; this.router.navigateByUrl('/login'); 

You set the absolute path to the URL of the component you want to go to.

Note. Always specify the complete absolute path when calling the navigateByUrl router method. Absolute paths should begin with the lead /

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

Relative Routing

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

NOTE. It’s a little intuitive how routing works, especially the 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 the current route route, but to another 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 }); 

Array of link parameters

The array of link parameters contains the following components for navigating the router:

• The path of the route to the target component. ['/hero']
• Necessary and additional route parameters that are included in the route URL. ['/hero', hero.id] or ['/hero', { id: hero.id, foo: baa }]

Directory-like syntax

The router supports directory-like syntax in the list of link options to help find a route name search:

./ or no leading slash matches the current level.

../ to go up one level along the route.

You can combine relative navigation syntax with ancestor track. If you must go to marriage, you can use the ../<sibling> convention to go up one level, then go and lower the schedule path.

Important notes regarding relative nagration

To navigate a relative path using the Router.navigate method, you must provide an ActivatedRoute to tell the router where you are in the current route tree.

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

From Official Angular Router Documentation

Answer 2

You have to use

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

In addition to indicating the route path, you can also specify the name of the route:

 { path:'/About', name: 'About', ... } this.router.parent.navigate(['About']); 

Answer 3

Also can be used without parent

tell the definition of the router as:

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

then you can navigate to 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, the name property no longer exists. the route is defined without the name property. therefore you should use the path instead of name . this.router.navigate(['/path']) and do not specify a leading slash for the path, use path: 'about' instead of path: '/about'

router definition:

 {path:'about', component: AboutComponent} 

then you can navigate path

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