Angular2 小贴士 RouterLink 导航

AngularJS的路由一直是学习的一大难点，咱们只能边看边学边掌握，边看边学边推翻。今天咱们来看一下在angular2中经过routerLink实现导航的几种方式，以及各自的优缺点。

Angular2的路由模块来自@angular/router，这不包含在angular2的核心模块中。因此若是咱们想要学习angular2的路由功能，必须导入该模块。

咱们本身的最佳实践就是不断的推翻本身的过程，痛苦并痛苦着。

我本身总结的几种导航方式:

1     <a routerLink='/dashboard/home' routerLinkActive='active'>Home1</a>
2     <a routerLink='/dashboard/home' [routerLinkActive]="['active']">Home2</a>
3     <a routerLink='../home' routerLinkActive="active">Home 2.2 </a>
4     <a [routerLink]="['/dashboard/home']" [routerLinkActive]="['active']">Home3</a>
5     <a [routerLink]="['../home']" [routerLinkActive]="['active']">Home4</a>
6     <a [routerLink]="['../home']" [routerLinkActive]="['active']">Home5</a>
7 
8     <a [routerLinkActive]="['active']" (click)="onSelect()">Home6</a>

onSelect()方法：

 1 import { Component, OnInit } from '@angular/core';
 2 import { Route, Router, ActivatedRoute, Params } from '@angular/router';
 3 import 'rxjs/add/operator/switchMap';
 4 
 5 @Component({
 6     templateUrl: './chart.component.html'
 7 })
 8 
 9 export class ChartComponent implements OnInit {
10     constructor(private route: ActivatedRoute, private router: Router) {
11 
12     }
13 
14     ngOnInit() {
15         console.log(this.route.params['id']);
16     }
17 
18     onSelect() {
19         this.router.navigate(['../home'],{relativeTo:this.route});
20     }
21 }

 

如今咱们来逐个分析一下这些能够导航的方式：

1. <a routerLink='/dashboard/home' routerLinkActive='active'>Home1</a>
   全部以斜线开头的都必须使用绝对路径来进行导航。也就是说咱们会导航到www.app.com/dashboard/home 这个路径，这个路径是绝对的。通常咱们不会使用这种方式。若是不使用绝对路径，必定谨记不要以斜线开头。
2. <a routerLink='/dashboard/home' [routerLinkActive]="['active']">Home2</a>
   可能咋一看这个和第一条是同样的，可是请咱们看routerLinkActive，第一条是单独的一个属性，而第二条做为一个属性指令来使用。还有一个重点，若是咱们使用属性指令，在给属性指令赋值的时候，必须在中括号内在加入一个单引号。这是为何？由于若是咱们不加这个单引号或双引号，那么angular会认为这是一个变量，会当作变量来使用。
3. <a routerLink='../home' routerLinkActive="active">Home 2.2 </a>
   能够看到这个routerLink使用的是相对路径，能够参考第七条，相对路径，是相对的哪一个路径，其实就是当前路由。以当前路由做为起点进行相对导航。举个简单的例子，咱们当前的路径为/dashboard/chart,如今咱们要导航到home(背景：chart和home都是dashboard下的一个组件，属于平级)，那么咱们就要使用两个点号..来表示。一个点号表示相对当前路径，两个点号就是相对父路径。
4. <a [routerLink]="['/dashboard/home']" [routerLinkActive]="['active']">Home3</a>
   经过指令方式来进行导航，能够参考第一条。绝对路径导航
5. <a [routerLink]="['../home']" [routerLinkActive]="['active']">Home4</a>
   经过指令方式进行导航，能够参考第一条和第三条，采用的routerLink指令和相对路径方式。
6. <a [routerLink]="['./home']" [routerLinkActive]="['active']">Home5</a>
   和第五条相同
7. <a [routerLinkActive]="['active']" (click)="onSelect()">Home6</a>
   经过angular脚本方式进行导航。

    this.router.navigate(['../home'],{relativeTo:this.route}); 若是要使用相对导航，必须加上relativeTo属性，而且赋值为route，route是ActivatedRoute的值。
   
   若是采用绝对路径，那么不须要添加这个属性。若是以斜线开头，而且定义了这个relativeTo属性会出现什么的？其实仍是绝对路径优先，relativeTo没有起做用。

 

经过咱们的简单分析，咱们来看一下，咱们通常会采用哪一种方式进行导航？

通常咱们不会直接定义绝对路径的方式进行导航，这有不少缘由：1.绝对路径很长的时候很容易写错  2.不容易移植。

那么采用相对路径，其实也存在不少问题：1.因为angular2的组件可复用，而且可嵌套，咱们若是要导航到一个组件，因为咱们的父子关系，可能会出现导航相对路径不一致的状况。

因为angular2的路由存在嵌套关系，而且能够重复嵌套相同组件到不一样层级，这就致使咱们的组件复用度远没有咱们想象的那么普遍。

 

其实就我我的而言，我更倾向于采用一个服务的方式提供绝对路径前缀，咱们在导航时动态的拼接成绝对路径的方式。

若是你有更好的方式，欢饮评论提供建议。

路由动画、路由拦截等其余功能咱们下次再聊。再看一遍睡觉