Angular 2-如何使用此.Router.Parent.navigate（“/关于”）导航到另一条路由？

Question

角度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('[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

您应该使用

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

除了指定路由路径外,还可以指定路由名称：

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

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

Answer 2

绝对路径路由

导航有两种方法:.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']
• 路由URL中的必需和可选路由参数。[“/hero”,hero.id]或[“/hero”,{id：hero.id,foo：baa}]

类目录语法

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

./或没有相对于当前级别的前导斜杠。

../在路由路径中上一级。

您可以将相对导航语法与祖先路径组合在一起。如果必须导航到同级路由，则可以使用../ 约定上一级，然后在同级路由路径上再下一级。

关于亲属关系的注意事项

若要使用router.navigate方法导航相对路径，必须提供activatedroute以使路由器了解您在当前路由树中的位置。

在link parameters数组之后，向ActivatedRoute添加一个设置了RelationVote属性的对象。然后路由器根据活动路由的位置计算目标URL。

来自官方Angular Router文档