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 }
现在我们来逐个分析一下这些可以导航的方式:
- <a routerLink='/dashboard/home' routerLinkActive='active'>Home1</a>
所有以斜线开头的都必须使用绝对路径来进行导航。也就是说我们会导航到www.app.com/dashboard/home 这个路径,这个路径是绝对的。一般我们不会使用这种方式。如果不使用绝对路径,一定谨记不要以斜线开头。 - <a routerLink='/dashboard/home' [routerLinkActive]="['active']">Home2</a>
可能咋一看这个和第一条是一样的,但是请我们看routerLinkActive,第一条是单独的一个属性,而第二条作为一个属性指令来使用。还有一个重点,如果我们使用属性指令,在给属性指令赋值的时候,必须在中括号内在加入一个单引号。这是为什么?因为如果我们不加这个单引号或双引号,那么angular会认为这是一个变量,会当做变量来使用。 - <a routerLink='../home' routerLinkActive="active">Home 2.2 </a>
可以看到这个routerLink使用的是相对路径,可以参考第七条,相对路径,是相对的哪个路径,其实就是当前路由。以当前路由作为起点进行相对导航。举个简单的例子,我们当前的路径为/dashboard/chart,现在我们要导航到home(背景:chart和home都是dashboard下的一个组件,属于平级),那么我们就要使用两个点号..来表示。一个点号表示相对当前路径,两个点号就是相对父路径。 - <a [routerLink]="['/dashboard/home']" [routerLinkActive]="['active']">Home3</a>
通过指令方式来进行导航,可以参考第一条。绝对路径导航 - <a [routerLink]="['../home']" [routerLinkActive]="['active']">Home4</a>
通过指令方式进行导航,可以参考第一条和第三条,采用的routerLink指令和相对路径方式。 - <a [routerLink]="['./home']" [routerLinkActive]="['active']">Home5</a>
和第五条相同 - <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的路由存在嵌套关系,并且可以重复嵌套相同组件到不同层级,这就导致我们的组件复用度远没有我们想象的那么广泛。
其实就我个人而言,我更倾向于采用一个服务的方式提供绝对路径前缀,我们在导航时动态的拼接成绝对路径的方式。
如果你有更好的方式,欢饮评论提供建议。
路由动画、路由拦截等其他功能我们下次再聊。再看一遍睡觉
我又回来了,回到了技术最前线,