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

Question

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

     }); 
    } 
} 

预先感谢您！

Answer 1

绝对路径路由导航

有两种方法用于导航，.navigate()和.navigateByUrl()

您可以使用该方法.navigateByUrl()绝对路径路由：

import {Router} from '@angular/router'; 

this.router= Router; 
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 }); 

链路参数阵列

链路参数数组保存下面我用于路由器导航的ngredients：

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

目录的语法

路由器支持目录的语法在链路参数列表，以帮助引导路线名称查找：

./或没有斜线相对于目前的水平。

../在路径路径上上升一级。

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

约相对nagivation

重要事项要浏览与Router.navigate方法的相对路径，则必须提供ActivatedRoute给你是在当前路径树，其中的路由器知识。

在链接参数数组后，添加一个对象，其中relativeTo属性设置为ActivatedRoute。路由器然后根据活动路线的位置计算目标网址。

来自官方的Angular Router Documentation

Answer 2

您应该使用

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

除了指定的路由路径，你也可以指定路线的名字：

{ 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 
} 

从2.0 名属性更新了V2.3.0

在路由导航不再存在。路线定义没有名称属性。所以你应该使用路径而不是名称。 this.router.navigate(['/path'])和没有斜线的路径，以便使用path: 'about'代替path: '/about'

路由器的定义，如：

{path:'about', component: AboutComponent} 

然后可以通过path

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