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的路由存在嵌套關係，而且能夠重複嵌套相同組件到不一樣層級，這就致使咱們的組件複用度遠沒有咱們想象的那麼普遍。

 

其實就我我的而言，我更傾向於採用一個服務的方式提供絕對路徑前綴，咱們在導航時動態的拼接成絕對路徑的方式。

若是你有更好的方式，歡飲評論提供建議。

路由動畫、路由攔截等其餘功能咱們下次再聊。再看一遍睡覺