这章说一下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的路由使用的更多相关文章

  1. Angular4学习笔记(二)-在WebStorm中启动项目

    点击配置 创建 选择命令 package.json 运行 查看运行结果

  2. Deep Learning(深度学习)学习笔记整理(二)

    本文整理了网上几位大牛的博客,详细地讲解了CNN的基础结构与核心思想,欢迎交流. [1]Deep learning简介 [2]Deep Learning训练过程 [3]Deep Learning模型之 ...

  3. React 入门学习笔记整理(九)——路由

    (1)安装路由 React-router React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api. Re ...

  4. Struts2学习笔记整理(二)

    这里是重点. Action接口 struts2 的Action可以是POJO 为了让用户开发的Action更加规范struts2提供了一个Action接口 ActionSupport基类 Struts ...

  5. HTML+CSS学习笔记整理二

    盒子模型CSS(重点) 边框border     边框通常使用连写border:1px(边框大小) solid(实线或其他)  red(颜色) border-collapse:collapse (合并 ...

  6. Angular4学习笔记-目录汇总

    Angular4学习笔记(一)-环境搭建 Angular4学习笔记(二)-在WebStorm中启动项目 Angular4学习笔记(三)- 路由 Angular4学习笔记(四)- 依赖注入 Angula ...

  7. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  8. Angular4学习笔记(十)- 组件间通信

    分类 父子组件通信 非父子组件通信 实现 父子 父子组件通信一般使用@Input和@Output即可实现,参考Angular4学习笔记(六)- Input和Output 通过Subject 代码如下: ...

  9. Deep Learning(深度学习)学习笔记整理系列之(二)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

随机推荐

  1. 常用表单验证&&常用正则

    ### 表单验证&&常用正则 ;(function(ELF){ ELF = ELF || (window.ELF = {}); var reg = {}, pattern = { /* ...

  2. Spring MVC执行流程

    SpringMVC是隶属于Spring Web中的一部分, 属于表现层的框架. 其使用了MVC架构模式的思想, 将Web层进行职责解耦, 使用请求-响应模型简化Web开发 SpringMVC通过中央调 ...

  3. redis缓存的应用详解

    在现在的很多项目,基本上都需要引入缓存机制,那么缓存到底是什么呢? 缓存  也就是数据交互的缓冲区  Cache 在java-web项目中实现缓存,也就是需要首先把数据库需要用到的数据备份一份作为副本 ...

  4. Openflow简介和安装

    搞网络研究的,跟踪斯坦福stanford大学的研究就很重要. 因为思科CISCO与斯坦福的渊源太深了.被誉神雕侠侣的思科创始人Sandy Lerner夫妇,一个在计算机学院,一个在商学院. 最近去看了 ...

  5. CSS个别属性

    *{ scrollbar-3dlight-color:#fff; // 3d亮色阴影边框(threedlightshadow)的外观颜色 scrollbar-highlight-color:#fff; ...

  6. Beagle X15 版本制作和烧录

    作为一大硬件开源组织中的一员,Beagle X15以他的强悍的性能在工业界有着广泛的应用,最近在做一个项目中 要用到它,就做了一些这方便的研究,发现里面还有不少坑要踩的,梳理一下踩到的坑,为后续做个积 ...

  7. 温故而知新—heap

    堆:堆不是STL中的容器组件,堆有分为大根堆和小根堆,堆的底层实现可以用优先队列进行实现.底层的容器实际上是一个vector.在C++数据结构中,堆也可用数组来实现.对于使用C++的开发人员来说,st ...

  8. Cesium剖面分析

  9. EOS 的世界里可能再也没有小偷了

    EOS 针对以下两种情况设计了应急措施: 1. 账户被盗(私钥被盗或有权限的其他账户被盗) 2. 账户遗失(私钥遗失或有权限的其他账户遗失) ## 1.账户被盗 EOS 有可能会强制要求所有账户的 O ...

  10. Linux-CentOS7下安装mysql5.6常见问题解决!

    第一次写博客,写的不好请大家多见谅!有遇到问题可以评论到下方,我会抽空帮大家解决!! 下载MySQL-5.6.tar安装包(包含server,client等) 首先用root用户将MySQL-5.6. ...