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

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

类似目录的语法

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

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

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

您可以将相对导航语法与祖先路径组合在一起.如果必须导航到兄弟路径,则可以使用../<sibling>约定上升一级,然后上下同级路径路径.

关于相对nagivation的重要说明

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

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

来自Angular Router的官方文档

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
}

针对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
}

Answer 4

import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');