Angular 2 + 折腾记 :(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 :配合可选参数可以实现当前路劲下的相对跳转,带参数跨页面跳转等

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;
      }
    });
  }


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

总结

基本项目用到一丢丢都榨干出来了。。。 我知道我技术渣,若是有一些更好的技巧,一些更好的写法。。亦或者是错误的 请留言,及时跟进,顺便学习学习。。。

下一篇说点什么好,,,自定义指令?自定义管道?待我捋一捋

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云Elasticsearch Service

从对象存储服务同步数据到Elasticsearch

AWS的S3, 阿里云的OSS, 腾讯云的COS, 都是常见的对象存储服务。对象存储服务面向非结构化数据,支持通过HTTP/HTTPS协议访问,支持存入文本、图...

4378
来自专栏大前端开发

微信小程序从子页面退回父页面时的数据传递

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数...

1231
来自专栏人工智能LeadAI

优雅的在终端中编写Python

最早我也只是在服务器上编辑文件的时候用用vim来改改程序,并没有把vim当做自己的主力编辑器。但是偶然的一次机会需要改一个奇葩的输入文件的格式,用了下Vim的宏...

2101
来自专栏美丽应用

给安卓Chrome加入主页按钮

9192
来自专栏软件测试经验与教训

Fiddler用法整理

读书与实践是获取知识的主要渠道,学习的权力只掌握在每个人自己手中,让学习成为一种生活的习惯,这比任何名牌大学的校徽重要得多!

1701
来自专栏小尘哥的专栏

前后端分离Nuxt.js解决SEO问题

背景:由于后端程序猿通常对CSS 、JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样...

4554
来自专栏Windows Community

Windows 8.1 应用再出发 - 创建我的第一个应用

转眼间Windows 8.1已经发布了四个多月,之前因为开发需要对Windows 8.1新特性进行过零散的学习和使用,一直没有静下心来系统的学习过。近日部门有几...

36612
来自专栏编程

在 Vim 编辑器中开发 Python 应用的 Vim 插件

Python-mode 是一个 Vim 插件,它使你能够在 Vim 编辑器中更快的利用包括 pylint、rope、pydoc、pyflakes、pep8、au...

3198
来自专栏Nian糕的私人厨房

从零开始构建你的 Gulp

本篇博文的内容根据 Introduction to Gulp.js 系列文章 拓展而来,其代码、依赖包及目录结构部分均有所更改,更多详细内容,敬请参考原文及作者...

1254
来自专栏生信技能树

请品鉴我的vim配置

背景 本人是生信工程师,主要使用的语言是 python, R, perl, shell,经常要ssh到远程服务器上写代码,因此学习了vim,后来发现了spf13...

5966

扫码关注云+社区

领取腾讯云代金券