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('[email protected]', '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']['/hero', hero.id]或['/hero', { id: hero.id, foo: baa }]类似目录的语法
路由器在链接参数列表中支持类似目录的语法，以帮助指导路由名称查找：
./或没有前导斜线相对于当前水平。
../在路线上升一级。
您可以将相对导航语法与祖先路径组合在一起。如果你必须导航到兄弟路线，你可以使用../<sibling>约定上升一级，然后在兄弟路径路径上上下移动。
关于相对导航的重要说明
要使用Router.navigate方法导航相对路径，必须提供ActivatedRoute以使路由器知道您在当前路径树中的位置。
在链接参数数组之后，添加一个relativeTo属性设置为ActivatedRoute的对象。然后，路由器根据活动路由的位置计算目标URL。
你应该用
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名称属性不再存在。 route define没有name属性。所以你应该使用路径而不是名字。 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)时抽搐的人来近乎即时地阅读谁在发展中。