angular4学习笔记整理(二)angular4的路由使用
这章说一下angular的路由
先说angular路由怎么引入,一开始new出来的angular项目它路由帮你配好了,但看要看app.module.ts里面
1.首先最上面要引入路由模块
import {RouterModule, Routes} from '@angular/router';
2.然后在ngModule里面加点东西

3.这个routeConfig需要自己定义,类型Routes,里面就是angular路由配置
const routeConfig: Routes = [
{path: '' , component : HomeComponent},
]
当然路由配置也是可以抽出来的
路由配置简单介绍
1.常用跳转
const routeConfig: Routes = [
{path: '' , component : HomeComponent}, //path为''首页即是
{path: 'chat',component: ChatComponent,},//访问首页地址+/chat 即能访问到chat组件
{path: 'au/:id',component: AuComponent},//路由param传参
{path: '**',component: Code404Component} //不能匹配的路由由 ** 匹配
]
其中第三个路由传参的接收方组件想要拿到参数就需要多加点
1.首先引入
import {ActivatedRoute, Params} from '@angular/router';
2.并在constructor里注入这个路由服务
constructor(private routeInfo: ActivatedRoute) { }
3.获取param参数
其中有2种方式获取param
第一种是snapshot 参数快照
ngOnInit() {
//constructor创建时会只创建一次ngOnInit,所以this.routeInfo.snapshot.params['id']的值会不变
this.productId = this.routeInfo.snapshot.params['id'];
}
但有一个问题
如果已经请求 localhost:4200/au/6 后,再请求 localhost:4200/au/8 ,相当于同路由跳转只是参数不同,那么第二次拿到的param数字还是第一次的6
原因
constructor创建时会只创建一次ngOnInit,所以this.routeInfo.snapshot.params['id']的值会不变
所以更多的获取参数更推荐第二种参数订阅的方式
ngOnInit() {
this.routeInfo.params.subscribe((params: Params) => this.productId = params.id);
}
怎么跳参数都是对的用第二种
子路由
只是一层路由明显满足不了开发需求,可以再配置子路由
{
path: 'product',
component: ProductComponent,
children: [
{
path: 'childA', component: ChildAComponent
},
{
path: 'childB', component: ChildBComponent
}
]
}
但是子路由光这样还是不行·
在父组件html里加跳到子路由的按钮时
<a [routerLink]="['./childA']" >销售员A</a>
<a [routerLink]="['./childB']" >销售员B</a>
注意这里不能加/ 因为斜杠指向根路径, ./才指向相对路径
重定向路由
使用 redirectTo
const routes: Routes = [{
path: '',
redirectTo: 'home/6',
pathMatch: 'full'
}]
辅助路由
就是一个插座,辅助路由通过不同的outlet配置,让页面的router-outlet标签,显示不同内容
路由配置
const routes: Routes = [{//辅助路由指向ChatComponent组件,插座名称aux
path: 'chat',
component: ChatComponent,
outlet: 'aux'
}]
引用插座的html代码
<a [routerLink]="[{outlets:{primary:'home/2',aux:'chat'}}]" ></a>
<a [routerLink]="[{outlets:{aux:null}}]" ></a><!--不引用辅助路由-->
<router-outlet></router-outlet> <!--插件内容显示的地方-->
应该会有人问第一行的primary干嘛的
辅助路由的改变只会改变插座的内容,不影响主路由
比如原本路径是http://localhost:4200/home/0
现在如果[routerLink]="[{outlets:{aux:'chat'}}]"
的a标签被点击,改变的只是辅助路由,路径会变为http://localhost:4200/home/0(aux:chat)
只有加上primary:'home/2'
,主路由才会一起变,变成http://localhost:4200/home/2(aux:chat)
同主路由间跳来跳去想把辅助路由干掉,用第二行即可
路由守卫
只有用户已经登陆或者拥有某些权限才可进入的路由
canActive
1.写一个守卫类,继承 CanActivate 接口
import {CanActivate} from '@angular/router';
export class LoginGuard implements CanActivate {
canActivate() {
let loginedIn: boolean = Math.random() < 0.5;
if (!loginedIn) {
console.log('用户未登陆');
}
return loginedIn;
}
}
这是CanDeactivate 与canActivate不同的是它要离开某个组件就需要保护那个组件,建立也要注入那个组件
export class UnsaveGuard implements CanDeactivate<ProductComponent>{
canDeactivate (component: ProductComponent) {
return window.confirm('是否离开');
}
这两个返回都应该是boolean
型
2.在路由配置里加配置
canActivate 在路由配置时可以配置一个数组,angular会一次调用数组中的项,一旦某个返回false,则会终止登陆操作
{
path: 'product',
component: ProductComponent,
canActivate: [loginGuard],
canDeactivate: [UnsaveGuard]
}
服务里加上该服务
@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [LoginGuard, UnsaveGuard],
exports: [RouterModule]
})
路由守卫 非常重要 。再给个我网上找的参考文章
http://blog.csdn.net/qq451354/article/details/54017466
angular4学习笔记整理(二)angular4的路由使用的更多相关文章
- Angular4学习笔记(二)-在WebStorm中启动项目
点击配置 创建 选择命令 package.json 运行 查看运行结果
- Deep Learning(深度学习)学习笔记整理(二)
本文整理了网上几位大牛的博客,详细地讲解了CNN的基础结构与核心思想,欢迎交流. [1]Deep learning简介 [2]Deep Learning训练过程 [3]Deep Learning模型之 ...
- React 入门学习笔记整理(九)——路由
(1)安装路由 React-router React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api. Re ...
- Struts2学习笔记整理(二)
这里是重点. Action接口 struts2 的Action可以是POJO 为了让用户开发的Action更加规范struts2提供了一个Action接口 ActionSupport基类 Struts ...
- HTML+CSS学习笔记整理二
盒子模型CSS(重点) 边框border 边框通常使用连写border:1px(边框大小) solid(实线或其他) red(颜色) border-collapse:collapse (合并 ...
- Angular4学习笔记-目录汇总
Angular4学习笔记(一)-环境搭建 Angular4学习笔记(二)-在WebStorm中启动项目 Angular4学习笔记(三)- 路由 Angular4学习笔记(四)- 依赖注入 Angula ...
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
- Angular4学习笔记(十)- 组件间通信
分类 父子组件通信 非父子组件通信 实现 父子 父子组件通信一般使用@Input和@Output即可实现,参考Angular4学习笔记(六)- Input和Output 通过Subject 代码如下: ...
- Deep Learning(深度学习)学习笔记整理系列之(二)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
随机推荐
- 常用表单验证&&常用正则
### 表单验证&&常用正则 ;(function(ELF){ ELF = ELF || (window.ELF = {}); var reg = {}, pattern = { /* ...
- Spring MVC执行流程
SpringMVC是隶属于Spring Web中的一部分, 属于表现层的框架. 其使用了MVC架构模式的思想, 将Web层进行职责解耦, 使用请求-响应模型简化Web开发 SpringMVC通过中央调 ...
- redis缓存的应用详解
在现在的很多项目,基本上都需要引入缓存机制,那么缓存到底是什么呢? 缓存 也就是数据交互的缓冲区 Cache 在java-web项目中实现缓存,也就是需要首先把数据库需要用到的数据备份一份作为副本 ...
- Openflow简介和安装
搞网络研究的,跟踪斯坦福stanford大学的研究就很重要. 因为思科CISCO与斯坦福的渊源太深了.被誉神雕侠侣的思科创始人Sandy Lerner夫妇,一个在计算机学院,一个在商学院. 最近去看了 ...
- CSS个别属性
*{ scrollbar-3dlight-color:#fff; // 3d亮色阴影边框(threedlightshadow)的外观颜色 scrollbar-highlight-color:#fff; ...
- Beagle X15 版本制作和烧录
作为一大硬件开源组织中的一员,Beagle X15以他的强悍的性能在工业界有着广泛的应用,最近在做一个项目中 要用到它,就做了一些这方便的研究,发现里面还有不少坑要踩的,梳理一下踩到的坑,为后续做个积 ...
- 温故而知新—heap
堆:堆不是STL中的容器组件,堆有分为大根堆和小根堆,堆的底层实现可以用优先队列进行实现.底层的容器实际上是一个vector.在C++数据结构中,堆也可用数组来实现.对于使用C++的开发人员来说,st ...
- Cesium剖面分析
- EOS 的世界里可能再也没有小偷了
EOS 针对以下两种情况设计了应急措施: 1. 账户被盗(私钥被盗或有权限的其他账户被盗) 2. 账户遗失(私钥遗失或有权限的其他账户遗失) ## 1.账户被盗 EOS 有可能会强制要求所有账户的 O ...
- Linux-CentOS7下安装mysql5.6常见问题解决!
第一次写博客,写的不好请大家多见谅!有遇到问题可以评论到下方,我会抽空帮大家解决!! 下载MySQL-5.6.tar安装包(包含server,client等) 首先用root用户将MySQL-5.6. ...