Angular 2 - How to navigate to another route using this.router.parent.navigate('/about').
It doesnt seem to work. I tried location.go("/about"); as that didnt work.
basically once a user has logged 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('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'); }); } }
Thank you in advance!
Absolute path routing
There are 2 methods for navigation, .navigate() and .navigateByUrl()
You can use the method .navigateByUrl() for absolute path routing:
import {Router} from '@angular/router'; this.router= Router; this.router.navigateByUrl('/login');
You put the absolute path to the URL of the component you want to navigate to.
Note: Always specify the complete absolute path when calling router's navigateByUrl method. Absolute paths must start with a leading /
// 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 path routing
If you want to use relative path routing, use the .navigate() method.
NOTE: It's a little intuitive 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 ../ 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 }
翻译