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

问题描述

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

Angular 2 - How do I navigate to another route using this.router.parent.navigate('/about')?

它似乎不起作用.我试过 location.go("/about"); 因为那没有用.

It doesn't seem to work.I tried location.go("/about"); as that didn't work.

基本上，一旦用户登录，我想将他们重定向到另一个页面.

Basically, once a user has logged in I want to redirect them to another page.

这是我的代码如下:

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

       });
   }
 }

推荐答案

绝对路径路由

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

There are 2 methods for navigation, .navigate() and .navigateByUrl()

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

You can use the method .navigateByUrl() for absolute path routing:

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

constructor(private router: Router) {}

navigateToLogin() {
   this.router.navigateByUrl('/login');
}

您将绝对路径放在要导航到的组件的 URL 中.

You put the absolute path to the URL of the component you want to navigate to.

注意:调用路由器的navigateByUrl方法时，请务必指定完整的绝对路径.绝对路径必须以 /

Note: Always specify the complete absolute path when calling router's navigateByUrl method. Absolute paths must start with a leading /

// 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() 方法.

If you want to use relative path routing, use the .navigate() method.

注意:路由的工作方式有点不直观，尤其是父路由、兄弟路由和子路由:

NOTE: It's a little unintuitive how the routing works, particularly parent, sibling, and child routes:

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

或者，如果您只需要在当前路由路径内导航，但导航到不同的路由参数:

Or if you just need to navigate within the current route path, but to a different route parameter:

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

链接参数数组

链接参数数组包含路由器导航的以下成分:

A link parameters array holds the following ingredients for router navigation:

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

类似目录的语法

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

The router supports directory-like syntax in a link parameters list to help guide route name lookup:

./ 或没有前导斜线是相对于当前级别的.

./ or no leading slash is relative to the current level.

../ 在路由路径上上一层.

../ to go up one level in the route path.

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

You can combine relative navigation syntax with an ancestor path. If you must navigate to a sibling route, you could use the ../<sibling> convention to go up one level, then over and down the sibling route path.

关于相对导航的重要说明

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

To navigate a relative path with the Router.navigate method, you must supply the ActivatedRoute to give the router knowledge of where you are in the current route tree.

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

After the link parameters array, add an object with a relativeTo property set to the ActivatedRoute. The router then calculates the target URL based on the active route's location.

来自官方 Angular 路由器文档

这篇关于Angular 2 - 如何使用 this.router.parent.navigate('/about') 导航到另一条路线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！