javascript - Angular 2 - 如何使用this.router.parent.navigate（'/ about'）导航到另一个路线？(Angular 2 - How to navigate to another route using this.router.parent.navigate('/about')?)

Question

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

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

It doesnt seem to work.

(它似乎没有用。)

I tried location.go("/about");

(我试过location.go（“/ about”）;)

as that didnt work.

(因为那没有用。)

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

(基本上一旦用户登录，我想将它们重定向到另一个页面。)

Here is my code below:

(这是我的代码如下：)

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

       });
   }
 }

Thank you in advance!

(先感谢您！)

  ask by AngularM translate from so

Answer 1

Absolute path routing

(绝对路径路由)

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

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

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

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

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

constructor(private router: Router) {}

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

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

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

Note: Always specify the complete absolute path when calling router's navigateByUrl method.

(注意：在调用router的navigateByUrl方法时，始终指定完整的绝对路径。)

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

Relative path routing

(相对路径路由)

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

(如果要使用相对路径路由，请使用.navigate()方法。)

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

Link parameters array

(链接参数数组)

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

(链接参数数组包含路由器导航的以下内容：)

• The path of the route to the destination component.

  (到目标组件的路径的路径。)

  ['/hero']
• Required and optional route parameters that go into the route URL.

  (进入路径URL的必需和可选路由参数。)

  ['/hero', hero.id] or ['/hero', { id: hero.id, foo: baa }]

  (['/hero', hero.id]或['/hero', { id: hero.id, foo: baa }])

Directory-like syntax

(类似目录的语法)

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.

(如果必须导航到兄弟路径，则可以使用../<sibling>约定上升一级，然后上下同级路径路径。)

Important notes about relative nagivation

(关于相对nagivation的重要说明)

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.

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

After the link parameters array, add an object with a relativeTo property set to the ActivatedRoute .

(在链接参数数组之后，添加一个对象，其relativeTo属性设置为ActivatedRoute 。)

The router then calculates the target URL based on the active route's location.

(然后，路由器根据活动路由的位置计算目标URL。)

From official Angular Router Documentation

(来自Angular Router的官方文档)