Angular 2 + 折腾记 ：(4)初步了解路由及使用
前言
路由这块的水挺深，我这里扯扯我用过的一些特性及一丢丢的经验
概念性的东西
言简意赅的总结一下：
路由就是控制视图与视图之间的跳转，之间还可以传递参数什么的,路由的退后及前进不会完整的请求整个页面，还可以完全不请求(在生命周期里面控制);
- angular 2 + 里面有两种url风格
- 一个是常规我们访问url那种
protocol://domain/path/f/fds - 一种的
hash(#)风格，protocol://domain/#/account/login
- 一个是常规我们访问url那种
可以操控路由了，那必然就可以做鉴权了。。。
路由相关的指令或者术语
ng-content: 可以嵌套一个组件的内容在另外一个组件中！！很常用！RouterLink：可以让一个元素具有跳转功能，里面有很多使用的参数[指令]，我大体解释下常用的哈queryParams： 可以传递参数的,跳转过去就是这种/security-alert?AlertType=50,可以接受对象skipLocationChange: 内容跳转，路由保持不变，换句话说，就是停留在上个页面的url而不是新的url -- 常用！fragment：代码片段拼接到url，只接受字符串,在url就是hash拼接；/security-alert#1232
ActivatedRoute: 当前活动的路由，非常常用，逻辑处理的时候经常用到，参数比上面多，大同小异ActivatedRouteSnapshot:这个是上面的局部实现，路由镜像，用来获取一些路由的信息很方便，单独用上面的也可以拿到相关的路由信息Router这个内置组件，是路由最重要的东东了，相对路由这些，绝对路径这些都可以实现，我这里也说说常用的url: 获取urlrouterState: 路由状态navigateByUrl：绝对路径的跳转,有个可选参数[{relativeTo, queryParams, fragment, preserveQueryParams, queryParamsHandling,}?: NavigationExtras]，可选参数就是上面那个停留在当前路径跳转这些parseUrl：格式化url，实用！navigate:配合可选参数可以实现当前路劲下的相对跳转，带参数跨页面跳转等
angular 4版本的路由加强了很多。。比如可以在路由进入或者脱离的时候做一些事件处理！！！，具体可以去看API的改动
常规路由
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';// 页面组件
import { NameComponent } from './name.component';const routes: Routes = [{ path: 'path', // path是路由访问的路径component: NameComponent, //component是映射的组件children:[ // children是嵌套组件的包含层{path:'', //留空可以让路径默认指向第一个组件，访问时候没有带任何子路径情况下component:'ffff' // 对应的组件记得先提前引入}，{path:'edit/:id', // 这样是代表子组件需要带一个参数才能进入component:'ggg' // 对应的组件记得先提前引入}]} ];@NgModule({// 注入到模块中，forChild只能用于子模块，forRoot只能用于跟模块// forRoot有一个可选的配置参数，里面有四个选项// enableTracing ：在console.log中打印出路由内部事件信息// useHash ：把url改成hash风格，protocol://domain/#/account/login// initialNavigation ： 禁用初始导航，没用过。。// errorHandler ：使用自定义的错误处理，来抛出报错信息；imports: [RouterModule.forChild|Root(routes)], // exports是导出组件，一般用于自定义组件或者模块。。exports: [RouterModule],
})复制代码懒加载
import { ModuleWithProviders } from '@angular/core';// 路由相关模块
import { Routes, RouterModule } from '@angular/router';// 布局
import { MitLayoutComponent } from './widgets/mit-layout/mit-layout.component';// 鉴权服务
import { RbacService } from './rbac/rbac.service';const routes: Routes = [{path: '',redirectTo: '/page/dashboard/vehicle-overview',pathMatch: 'full', // 匹配全局，默认是'prefix','full'是全局匹配/canActivate: [RbacService] // canActivate是内置拦截器，RbacService是鉴权服务},{path: 'page',component: MitLayoutComponent,canActivate: [RbacService],children: [ // 懒加载在目前的版本都必须用绝对路径指向对应的模块,dashboard.module是文件名，#DashboardModule是里面到处的模块，必须紧跟才能正确识别{ path: 'base-data', loadChildren: 'app/modules/base-data/base-data.module#BaseDataModule' }, // 基础数据},{ // 账号相关path: 'account',loadChildren: 'app/modules/account/account.module#AccountModule',},{path: 'event',loadChildren: 'app/modules/mobile-alarm/mobile-alarm.module#MobileAlarmModule' // 安全警报移动端处理},{ path: 'error', loadChildren: 'app/modules/error/error.module#ErrorModule' }, // 错误{ path: 'not-found', redirectTo: 'error/404' }, // 404 { path: '**', redirectTo: 'error/404' } // 错误 ， 没有匹配到任何路径的都跳转到404];// ModuleWithProviders 是个接口，就是允许ngModule和providers类型
export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });// 上面这种写法只是把路由到处到一个变量，也就是要生效必须到相应的模块中引入(NgModule)中import进去复制代码小技巧
- 获取url的id
// 根据是否存在id判断是新增还是修改checkAction() {// 用activatedRoute来获取url上对应的参数this.activatedRoute.params.subscribe((params: { id: number }) => {if (params.id) {this.id = params.id;} else {this.showLoading = false;}});}// 这种是直接获取queryParamthis.activatedRoute.queryParams.subscribe((res: { AlertType: string }) => {console.log(res);},(err):never => {console.log('我靠，网络错误');});复制代码- 返回上个页面
// 取消back() {// 这里判断id，url进来的带了一个关联id，比如你要查看一个用户的详细信息，根据id关联// 在这个页面获取到这个id，然后进行的路由的相对跳转if (this.id) {this.router.navigate(['../../'], { relativeTo: this.activatedRoute });} else {this.router.navigate(['../'], { relativeTo: this.activatedRoute });}}复制代码总结
基本项目用到一丢丢都榨干出来了。。。
我知道我技术渣，若是有一些更好的技巧，一些更好的写法。。亦或者是错误的
请留言，及时跟进，顺便学习学习。。。
下一篇说点什么好，，，自定义指令?自定义管道？待我捋一捋
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！