ng2学习笔记之路由机制

Posted on

在看完大漠老师讲解ng2的路由的时候不得不感叹它的强大,而且其官网对它的介绍也有很长的篇幅，本文只挑其重点来做笔记，更具体的内容可查看官网。

  1. 基本用法

ng2的路由和ng1有所不同,在1里面几乎大家都很讨厌内置的路由机制,因为它太不方便了,所以才有了UI-Router模块,可能谷歌大大团队认识了这一点,在ng2里面完善和加强了内置的路由机制,使其更加的强大和丰富,包括异步加载特性分区,在导航时预加载特性分区，当然也包括H5或hash的URL风格，更加入了守卫函数这个新概念，下面来说说它的基本用法，

在使用router之前一定要引入路由库@angular/router，这样才能使用路由服务，同时还需要在根目录的index.html的head标签里面加入

1
<base href="/">

然后我们就可以创建router.ts文件来存放我们的路由配置，如

1
2
3
4
5
6
7
8
9
10
11
export const appRoutes=[
	{
		path:"",
		redirectTo:"home",
		pathMatch:"full"
	},
	{
		path:"app",
		component:"AppComponent"
	}
]

第一个对象里面来指明当url地址没有匹配任何路由的时候页面指向home模块，也就是说默认的首页跳转到home这个页面，第二个对象说明当匹配到app这个路由的时候页面切换到AppComponent页面，基本配置就是这么简单，配置完成后还需要进行以下步骤

路由插座
使用router-outlet路由插座来告诉路由当url地址匹配到某一个路由的时候所需要显示的位置，相当于一个占位符，注意是需要在宿主视图的模板中来定义路由插座，

路由链接
配置完路由和插座后就得让用户来导航到对应的路由，我们需要用到routerLink，注意这个routerLink是需要配置到需要用户点击的a标签里面，充当a标签的属性，当用户点击的时候就会匹配路由的路径然后显示在router-outlet里面，如

1
2
3
4
5
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/APP" routerLinkActive="active">APP</a>
</nav>
<router-outlet></router-outlet>

比如用户点击了app这个a标签那么routerlink就会去匹配router.ts文件里面的path，当找到对应的path后就会将其component里面对应的模板显示在router-outlet里面。
基本的用法就这些，除此之外还是很多不同的选项来解决不同的需求。

2.模块的懒加载

官网所阐述的路由模块懒加载其实可以理解为按需加载，当我们配置好了需要懒加载的模块的时候他们就会异步的去加载,能够在我们加载初始路由的时候在后台加载其他模块，提升用户体验，如

1
2
3
4
{
  path: 'crisis-center',
  loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
}

在这里我们用loadChildren来配置需要懒加载的模块

3.路由守卫

ng2的路由守卫机制是我认为最应该掌握的路由机制，因为它实在是太有用了，到目前为止，我们的路由允许用户在url上面输入任何的能够匹配到我们路由配置的任何路径，相当于畅通无阻，但有时候这样确是不好的，如果有的页面是需要用户的特殊身份比如(管理员爸爸)的时候不是所有人都能够进去的，同时有的页面有的模块不是所有用户都能看见和使用的，比如如下几个常见的问题

  1. 该用户无权导航到对应的组件
  2. 用户得先登录
  3. 在显示组件的时候需要先获取数据
  4. 在离开组件的时候需要保存修改
  5. 用户点击关闭的时候询问用户时候放弃本次修改而不保存
    等等这些，我们都可以用路由守卫来解决（正因为在项目中需要考虑到权限的问题，所以它真的是贼好用啊）

首先路由守卫会返回一个布尔值，来控制路由器的行为，
如果返回true，导航继续
如果返回false，导航终止，且用户会停留在原地

同时，路由守卫还支持以异步的方式处理结果，可以返回一个Observable或Promise对象，路由器会等待这个可观察对象的结果解析成true或false

路由器支持多种守卫，如

  1. 用CanActivate来处理导航到某路由的情况。
  2. 用CanActivateChild处理导航到子路由的情况。
  3. 用CanDeactivate来处理从当前路由离开的情况。
  4. 用Resolve在路由激活之前获取路由数据。
  5. 用CanLoad来处理异步导航到某特性模块的情况。

例如CanActivate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// import所需库
export class Test implements CanActivate{
	constructor(
		private router:Router,
		public testService:TestService
	){}
	
	CanActivate():boolean{
		// 通过向服务器获取用户权限信息
		return true;
	}
}

更全的内容可点击https://angular.cn/docs/ts/latest/guide/router.html#!#guards

技术
© 2017 RABBIT All Rights Reserved.
Theme by hiero