Angular 2 – 如何使用this.router.parent.navigate（'/ about'）导航到另一条路线

Angular 2 – 如何使用this.router.parent.navigate（'/ about'）导航到另一条路线。

它似乎没有工作。 我试过location.go（“/ about”）; 因为没有工作。

基本上一旦用户login，我想redirect到另一个页面。

这里是我的代码如下：

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

先谢谢你！

Answer 1

绝对path路由

有2种导航方式， .navigate()和.navigateByUrl()

您可以使用方法.navigateByUrl()进行绝对path路由：

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

您将绝对path放到要导航到的组件的URL上。

注意：在调用路由器的navigateByUrl方法时，一定要指定完整的绝对path。 绝对path必须以领先/

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

相对path路由

如果要使用相对path路由，请使用.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 }); 

或者，如果您只需要在当前pathpath中导航，但是导航到不同的路线参数：

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

链接参数数组

链接参数数组包含路由器导航的以下要素：

• 到目标组件的路由的path。 ['/hero']
• 进入路由URL的必需和可选路由参数。 ['/hero', hero.id]或['/hero', { id: hero.id, foo: baa }]

类似目录的语法

路由器支持链接参数列表中的类似目录的语法，以帮助指导路由名称查找：

./或者没有前导斜杠是相对于当前的水平。

../在path上升一级。

您可以将相对导航语法与祖先path组合起来。 如果您必须导航到兄弟路线，则可以使用../<sibling>惯例上升一级，然后上下兄弟路线path。

有关相对激动的重要说明

要使用Router.navigate方法导航相对path，必须提供ActivatedRoute以使路由器知道您在当前path树中的位置。

在链接参数数组之后，添加一个relativeTo属性设置为ActivatedRoute 。 然后，路由器根据活动路由的位置计算目标URL。

从官方的Angular路由器文档

Answer 2

你应该使用

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

除了指定pathpath之外，还可以指定路由的名称：

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

Answer 3

也可以使用没有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路由名称属性不存在。 路由定义没有名称属性。 所以你应该使用path而不是名字 。 this.router.navigate(['/path'])并且没有前导斜杠 ，所以使用path: 'about'而不是path: '/about'

路由器定义如下：

 {path:'about', component: AboutComponent} 

然后可以通过path导航

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