angular5学习笔记(deep in 路由)
最近接手了一个angular5的项目。项目本身是由不同的人开发的,所有代码结构风格本身就有很大不同,加上本身接触angular5也不久,之前都是使用1,所有自身压力还是很大的。
接手前几天当然是熟悉代码了。其中就有用到路由的几个延伸功能,比如子路由,路由延迟加载。
子路由children:
话不多说,先上代码
{
path: '',
component: QuestionsComponent,
canActivate:[AuthGuard],
children: [
{path: '', redirectTo: 'testMain/disk', pathMatch: 'full'},
{path: 'testMain/:current', component: TestMainComponent},
{
path: 'addQuestion',component: QuestionAddComponent,
}
]
}
其中,path空即表示默认情况的空路由,一般指向该部分的主页main。其写法有两种,一种是一般大家都会采用的形如上边代码的写法把默认写入children中,另一种是直接写在父路由,即把上边代码的children第一个配置替换上边父路由的配置。
代码解析:path和component就不多说了,路由的基本配置。
canActivate,路由守卫,一共有以下5个:
用CanActivate来处理导航到某路由的情况;
用CanActivateChild处理导航到子路由的情况;
用CanDeactivate来处理从当前路由离开的情况;
用Resolve在路由激活之前获取路由数据;
用CanLoad来处理异步导航到某特性模块的情况。
他们的使用方法类似,作用功能和使用的地方不同,这里先介绍本文用到的canactivate。这里指向的是AuthGuard守卫对象,这个对象返回一个布尔值,因此用来做权限控制和保护之类的功能。
children,子路由,redirectTo,重定向到,即该情况(后边为空)时默认加载到的页面和转到的路由。
pathMatch,匹配规则,有prefix和full两种。full即严格全词匹配;prefix即匹配前缀,意思就是以该path开头的都能匹配到。两者的差别语言描述难以想象,举个栗子:/a,/asd,/a/sdds,/asd/sda。full时只能匹配到/a和/a/assda,前缀则都可以匹配到。(这里应该没有理解错吧。有错误欢迎大家指正) 再就是路由的懒加载lazyload,也叫延迟加载,实现按需加载功能,对于页面优化有很大用处。代码如下
interface NavigationExtras {
relativeTo : ActivatedRoute
queryParams : Params
fragment : string
preserveQueryParams : boolean
queryParamsHandling : QueryParamsHandling
preserveFragment : boolean
skipLocationChange : boolean
replaceUrl : boolean
}
1.以根路由跳转/login:
this
.router.navigate([
'login'
]);
2.设置relativeTo相对当前路由跳转,route是ActivatedRoute的实例,使用需要导入ActivatedRoute
this
.router.navigate([
'login'
, 1],{relativeTo: route});
3.路由中传参数 /login?name=1
this
.router.navigate([
'login'
, 1],{ queryParams: { name: 1 } });
4.preserveQueryParams默认值为false,设为true,保留之前路由中的查询参数/login?name=1 to /home?name=1
this
.router.navigate([
'home'
], { preserveQueryParams:
true
});
5.路由中锚点跳转 /home#top
this
.router.navigate([
'home'
],{ fragment:
'top'
});
6.preserveFragment默认为false,设为true,保留之前路由中的锚点/home#top to /role#top
this
.router.navigate([
'/role'
], { preserveFragment:
true
});
7.skipLocationChange默认为false,设为true,路由跳转时浏览器中的url会保持不变,但是传入的参数依然有效
this
.router.navigate([
'/home'
], { skipLocationChange:
true
});
8.replaceUrl默认为true,设为false,路由不会进行跳转
this
.router.navigate([
'/home'
], { replaceUrl:
true
});
angular5学习笔记(deep in 路由)的更多相关文章
- Symfony2 学习笔记之系统路由
mfony2 学习笔记之系统路由 漂亮的URL绝对是一个严肃的web应用程序必须做到的,这种方式使index.php?article_id=57这类的丑陋URL被隐藏,由更受欢迎的像 /read/ ...
- angular5学习笔记 路由通信
首先在路由字典中,接收值的组件中加上:/:id 在发送值的组件中,发送值的方式有几种. 第一种:<a routerLink="/detail/1">新闻详情1</ ...
- Angular5学习笔记 路由配置
因为angular-cli脚手架的关系,所以配置路由可以通过命令行来创建路由文件 原本创建一个angular项目的命令是ng new 项目名,就可以了,但这样创建出来的项目是没有路由文件的. 如果需要 ...
- Angular5学习笔记 - 路由管理(五)
一.添加路由管理引用 打开src/app/app.module.ts文件 import {RouterModule} from '@angular/router'; import {Routes} f ...
- Angular4.0学习笔记 从入门到实战打造在线竞拍网站学习笔记之二--路由
Angular4.0基础知识见上一篇博客 路由 简介 接下来学习路由的相关知识 本来是不准备写下去的,因为当时看视频学的时候感觉自己掌握的不错 ( 这是一个灰常不好的想法 ) ,过了一段时间才发现An ...
- Angular4.0从入门到实战打造在线竞拍网站学习笔记之二--路由
Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 Angular4.0数据绑定&管道 路由 简介 接下来学习路由的相关知识 本来是不准备写下 ...
- NodeJS学习笔记 - Express4.x路由操作
一.为Express添加about路由 1.新建js文件,about.js 2.打开about.js,并输入以下代码: var express=require('express'); var rout ...
- nodejs学习笔记<三>关于路由(url)
在网站开发中,路由的设置非常关键.nodejs对路由处理封装了一个比较全面的模块. 来认识下url模块 1)在命令行(cmd)可以直接 node —> url 可直接查看url模块的所有方法. ...
- Angular5学习笔记 http请求
在anular4更新到angular5后,有些模块也发生了有些变化,例如http模块. 首先在app.module.ts里面引入HttpClientModule import { HttpClient ...
随机推荐
- Darwin Streaming Server 安装流程
Darwin StreamingServer 安装流程 Darwin StreamingServer 支持开放源代码和基于标准的实时传输协议/实时流协议(RTP/ RTSP).MPEG-4 和MP3 ...
- ubuntu中taglist和ctags安装使用
1.使用命令安装ctags: 2.安装taglist 下载: http://vim.sourceforge.net/scripts/download_script.php?src_id=6416 拷贝 ...
- 【一天一道LeetCode】#17. Letter Combinations of a Phone Number
一天一道LeetCode (一)题目 Given a digit string, return all possible letter combinations that the number cou ...
- C++智能指针及其简单实现
本文将简要介绍智能指针shared_ptr和unique_ptr,并简单实现基于引用计数的智能指针. 使用智能指针的缘由 1. 考虑下边的简单代码: int main() { ); ; } 就如上边程 ...
- ANDROID框架结构和介绍
下图是ANDROID4.4 版本包含的所有系统服务.本地服务和应用的框架图,组织为三层:应用层.系统服务层.本地进程和服务层.应用层通常通过服务提供的对外API接口(一个服务管理对象)与服务交互,系统 ...
- SpriteBuilder中同父节点的显示顺序
如下图: 到目前为止,GameScene依赖于节点在SpriteBuilder中的顺序去决定其绘制的顺序. level content(_levelNode)被首先绘制,然后GameMenuLayer ...
- 网站开发进阶(四)Tomcat Server处理一个http请求的过程
Tomcat Server处理一个http请求的过程 假设来自客户的请求为: http://localhost:8080/wsota/wsota_index.jsp 1) 请求被发送到本机端口8080 ...
- Hbase replication操作
1.修改hbase-site.xml文件 <property> <name>hbase.replication</name> <value>true ...
- 安装docker及配置Android开发环境
安装docker 官方原来的安装docker的脚本https://get.docker.com/已经过时,现在使用的是https://get.docker.com/,命令如下: curl -s htt ...
- 【Qt编程】基于Qt的词典开发系列<十五>html特殊字符及正则表达式
1.html特殊字符的显示 我们知道html语言和C语言一样也有一些特殊字符,它们是不能正常显示的,必须经过转义,在网上可以查到如何显示这些字符,如下图所示: 上图给了最常用的特殊字符的显示,下面我们 ...