Angular 2.x折腾记 ：(4)初步了解路由及使用

前言

路由这块的水挺深，我这里扯扯我用过的一些特性及一丢丢的经验

概念性的东西

言简意赅的总结一下：

路由就是控制视图与视图之间的跳转，之间还能够传递参数什么的,路由的退后及前进不会完整的请求整个页面，还能够彻底不请求(在生命周期里面控制);

• angular 2 + 里面有两种url风格

• 一个是常规咱们访问url那种protocol://domain/path/f/fds

• 一种的hash(#)风格，protocol://domain/#/account/login

• 能够操控路由了，那必然就能够作鉴权了。。。

• 路由相关的指令或者术语

  • <router-outlet> :路由占位符，能够理解为渲染路由组件的区域，一个组件只能一个无命名<router-outlet>，命名的能够多个
  • ng-content: 能够嵌套一个组件的内容在另一个组件中！！很经常使用！
  • RouterLink：可让一个元素具备跳转功能，里面有不少使用的参数[指令]，我大致解释下经常使用的哈
    • queryParams ： 能够传递参数的,跳转过去就是这种/security-alert?AlertType=50,能够接受对象
    • skipLocationChange : 内容跳转，路由保持不变，换句话说，就是停留在上个页面的url而不是新的url -- 经常使用！
    • fragment：代码片断拼接到url，只接受字符串,在url就是hash拼接；/security-alert#1232
  • ActivatedRoute: 当前活动的路由，很是经常使用，逻辑处理的时候常常用到，参数比上面多，大同小异
  • ActivatedRouteSnapshot:这个是上面的局部实现，路由镜像，用来获取一些路由的信息很方便，单独用上面的也能够拿到相关的路由信息
  • Router这个内置组件，是路由最重要的东东了，相对路由这些，绝对路径这些均可以实现，我这里也说说经常使用的
  • url: 获取url
  • routerState: 路由状态
  • navigateByUrl：绝对路径的跳转,有个可选参数[{relativeTo, queryParams, fragment, preserveQueryParams, queryParamsHandling,}?: NavigationExtras]，可选参数就是上面那个停留在当前路径跳转这些
  • parseUrl：格式化url，实用！
  • navigate :配合可选参数能够实现当前路劲下的相对跳转，带参数跨页面跳转等

常规路由

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;
      }
    });
  }
  
  
  // 这种是直接获取queryParam
  this.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 });
    }
  }
复制代码

总结

有不对之处请留言，会及时跟进修正，谢谢阅读