手把手教你使用Angular之路由与导航

原文转自：轻样知生 - 手把手教你使用Angular之路由与导航 - Tylili

一、路由

任何路由必须通过路由模块进行注册，然后才能使用。具体代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';const userRoutes: Routes = [{path: '', redirectTo: '/index', pathMatch: 'full'},{path: 'hello/:id', component: HelloComponent}{path: 'world', component: WorldComponent, canActivate: [RouterGuard]},{path: 'sign',component: HelloComponent,children: [{ path: 'sign-in', component: SignInComponent, data: {isAuth: false} },]}
];@NgModule({imports: [RouterModule.forRoot(userRoutes, { useHash: true })],exports: [RouterModule],providers: [RouterGuard]
})
export class WorldRouterModule { }

上例中，组件和对应的路由地址通过Route对象包装起来，然后将Routes数组通过RouterModule类的forRoot方法注册，最后再将RouterModule输出。另外，上述例子中有三个地方需要注意：

1、Route对象

Route对象作为路由注册的最小单元，其本身因为丰富的使用场景而支持多种配置方式。常用的有如下四种

1. 重定向：先通过 redirectTo 属性指定重定向的视图路径，然后通过 pathMatch 属性指定匹配规则。本例中配置的意思是，当域名后面的路径为空时，重定向到路径为 /index的视图中。
2. 绑定outlet：通过配置 outlet 属性使对应视图显示在指定路由插座下。
3. 子路由：可以通过 children 属性配置该路径下的子路径以及对应视图，也可用通过使用  loadChildren 属性，以  loadChildren: .sign/sign-module#SignModule'  的方式配置整个模块，但该配置方式使用的是懒加载的方式。
4. 路由传参：通过使用 :参数名 的方式传递参数，例如 hello/:id ，可通过路径传递名为id的参数。
5. 路由传值：通过使用 data 属性来传递数据，然后在对应视图中直接使用，例如  data: {isAuth: false} ，可通过路由，将  isAuth 的值 false 传递给对应的视图。

2、路由守卫

上例中的第二个路由便是使用了路由守卫，路由守卫的作用是控制路由的出入口，类似于拦截器的作用，但又被细分成多种类型。路由守卫的实现方式是通过实现对应钩子中的方法来完成路由的特定操作。部分例子如下：

import { Router, CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { isNullOrUndefined } from 'util';@Injectable()
export class RouterGuard implements CanActivate {constructor(private router: Router,) {}canActivate() {if (isAuth) {return true;} else {this.router.navigate(['/sign/sign-in']);return false;}}
}

上述中的实现的是CanActivate钩子，该钩子是Angular用来控制路由通过与否，主要通过用户的权限来控制路由的流向。上例中的流程如下，若有权限，便放行，否则便跳转到路由地址为/sign-in的视图中。而路由守卫的使用方法如第一个例子中，path为world的Route对象中配置了canActivate属性，该属性对应路由守卫中的CanActivate钩子，即当使用CanActivate钩子实现时，便通过canActivate属性来配置。

3、forRoot

作为路由注册的方法，一个应用应该只能使用一次forRoot方法。而在子模块中通常使用forChild方法。和前者不同的是，forChild仅仅只能用作注册路由，而前者可通过可选参数config进行配置。例如上例中，通过将useHash值设为true来采用hash策略进行路由。  

二、导航

这里的导航是通过路径跳转到对应视图的统称。导航的入口通常有两种方式，一种是通过配置链接，另一种是编程式。而导航的出口便是通过在页面中使用路由插槽的方式来实现，即，配置路由插槽的视图会在插槽下方显示对应的子视图。

1、路由链接

形如 ，但具体的使用方式十分丰富，常用的使用如下：

1. 路径参数： 或者 ，该链接对应上例中的 {path: 'hello/:id', component: HelloComponent} ，将tylili作为参数id的值传送出去。 
2. 路由传参： ，该链接将传送一个名为name，值为Tylili的参数。

2、编程式导航

编程式导航是指通过 Router 对象进行导航，常用使用方法如下：

1. 路径传参：this.router. navigateByUrl('/hello/Tylili') 或者 this.router.navigate(['/hello', 'Tylili'])，意思同路由链接中的路径传参。 
2. 路由传参：this.router.navigate(['/hello'], { queryParams: { name: 'Tylili' } }) ，意思同路由链接中的路由传参。 

3、获取参数

通过 ActivatedRoute 对象，我们可以获取路径参数，也可以获取路由参数。

形如 this.route.snapshot.params.name 或者 this.route.snapshot.paramMap.get('name')，该方式用来获取路径参数。

形如 this.route.snapshot.queryParams.name ，该方式用来获取路由参数。

4、路由插槽

一个视图中可以有多个路由插槽，但只能有一个住插槽，其余插槽均需使用 name 命名，例如：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！