一、路由时传递参数的方式

1、在查询参数中传递数据

//页面
<a routerLink="/product" [queryParams]="{id:1}">商品详情</a>
//ts获取参数
export class ProductComponent implements OnInit {
private productId: number;
constructor(private routeInfo: ActivatedRoute) { }
ngOnInit() {
this.productId = this.routeInfo.snapshot.queryParams['id'];
}
}

相应的后台获取是:ActivedRoute.queryParams[id]

2、在路由路径中传递数据

//页面
<a [routerLink]="['product', 1]">商品详情</a>
//后台页面,先修改路由定义,app-routing.modules.ts中
const routes: Routes = [
{path: 'product/:id', component: ProductComponent},
{path: '**', component: HomeComponent},
]; this.productId = this.routeInfo.snapshot.params['id'];

在路由定义时,定义为:product/:id,其中“:id”代表参数

3、在路由配置中传递数据

//页面
<input type="button" value="商品详情" (click)='toProductDetails()' >

页面跳转:

constructor(
private router: Router, //这里需要注入Router模块
){} toProductDetails(){
//这是在html中绑定的click跳转事件
this.router.navigate(['product-detail'], {
queryParams: {
productId: '1',
title: 'moon'
}
});
}

接收参数:

constructor(
private activatedRoute: ActivatedRoute, //这里需要注入ActivatedRoute模块
) {
activatedRoute.queryParams.subscribe(queryParams => {
let productId = queryParams.productId;
let title = queryParams.title;
});
}

二、后台接收路由参数方式

1、snapshot和subscribe两种,区别在于在路由地址不变的情况下,若参数发生变化,后者所接收的参数也会随之变化,前者不变。

三、路由重定向

访问一个特定的地址时,会将其重定向到另一个指定的地址

1 //在定义路由时
2 {path: '', redirectTo: '/home', pathMatch: 'full' },
3 {path: 'home', component : HomeComponent},

参考:

Angular路由参数传递

angular4.0中路由传递参数、获取参数最nice的写法

Angular路由参数传递的更多相关文章

  1. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. angular路由详解:

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  3. angular 路由的引用

    使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node  -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install  -g  angu ...

  4. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  5. angular路由(自带路由篇)

    一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...

  6. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  7. Angular路由守卫 canDeactivate

    目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...

  8. Angular 路由守卫

    1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...

  9. angularjs中使用锚点,angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

随机推荐

  1. 解决/usr/bin/ld: cannot find -lssl

    一般情况下,-lssl表示要寻找库 libssl.so, 而上面的错误表示ld找不到这个库,一般情况下,原因是系统中没有安装这个库,只要安装就好了. 可以先使用sudo apt-cache searc ...

  2. 跟着百度学PHP[14]-初识PDO数据库抽象层

    目录: 00x1 php中的pdo是什么? 00x2 pdo创建一个PDO对象 00x1 php中的pdo是什么? 就是操作数据库的方法,pdo就是把操作数据库的函数封装成一个pdo类,其间做了安全验 ...

  3. Vim 学习笔记二

    1. 粘帖 p 光标前 P 2. 撤销对撤销的撤销 Ctrl+r 3. dl:删除一个字符,daw:删除一个单词,dap:删除一个段落 4. 单个c字符并无效果,cc删除整个一行 C:从当前光标出删除 ...

  4. ffmpeg 和 x264的参数对照

    ffmpeg 和 x264的参数对照   x264 ffmpeg 说明 命令行 字段 命令行 字段 qp qp_constant cqp cqp 固定量化因子.取值范围0到51. 经常取值在20-40 ...

  5. springBoot文档地址

    文档: https://www.gitbook.com/book/qbgbook/spring-boot-reference-guide-zh/details 配置: http://docs.spri ...

  6. jquery js 动态加载 js文件

    jquery方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  7. CentOS安装Oracle官方JRE

    CentOS自带的JRE是OpenJDK,因为一些原因,需要换用Oracle官方出品的JRE. Oracle JRE下载地址http://java.com/zh_CN/(下载时注意选择相应版本) 可以 ...

  8. 常用的tagVARIANT结构【整理】

    VARIANT数据结构包含两个域(如果不考虑保留的域).vt域描述了第二个域的数据类型.为了使多种类型能够在第二个域中出现,我们定义了一个联合结构.所以,第二个域的名称随着vt域中输入值的不同而改变. ...

  9. [转帖收集] Java注解

    1.Annotation 它的作用是修饰编程元素.什么是编程元素呢?例如:包.类.构造方法.方法.成员变量等.Annotation(注解)就是Java提供了一种元程序中的元素关联任何信息和任何元数据( ...

  10. django用户认证系统——修改密码6

    再此之前我们已经完成了用户登录.注册.注销等功能,接下来让我们继续为用户提供修改密码的功能.该功能 Django 的 auth 应用也已经为我们提供,过程几乎和之前的登录功能完全一样. 编写修改密码模 ...