Angular路由参数传递
一、路由时传递参数的方式
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},
参考:
angular4.0中路由传递参数、获取参数最nice的写法
Angular路由参数传递的更多相关文章
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- angular路由详解:
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- angular 路由的引用
使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install -g angu ...
- angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
- angular路由(自带路由篇)
一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
- Angular路由守卫 canDeactivate
目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
- angularjs中使用锚点,angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
随机推荐
- 解决/usr/bin/ld: cannot find -lssl
一般情况下,-lssl表示要寻找库 libssl.so, 而上面的错误表示ld找不到这个库,一般情况下,原因是系统中没有安装这个库,只要安装就好了. 可以先使用sudo apt-cache searc ...
- 跟着百度学PHP[14]-初识PDO数据库抽象层
目录: 00x1 php中的pdo是什么? 00x2 pdo创建一个PDO对象 00x1 php中的pdo是什么? 就是操作数据库的方法,pdo就是把操作数据库的函数封装成一个pdo类,其间做了安全验 ...
- Vim 学习笔记二
1. 粘帖 p 光标前 P 2. 撤销对撤销的撤销 Ctrl+r 3. dl:删除一个字符,daw:删除一个单词,dap:删除一个段落 4. 单个c字符并无效果,cc删除整个一行 C:从当前光标出删除 ...
- ffmpeg 和 x264的参数对照
ffmpeg 和 x264的参数对照 x264 ffmpeg 说明 命令行 字段 命令行 字段 qp qp_constant cqp cqp 固定量化因子.取值范围0到51. 经常取值在20-40 ...
- springBoot文档地址
文档: https://www.gitbook.com/book/qbgbook/spring-boot-reference-guide-zh/details 配置: http://docs.spri ...
- jquery js 动态加载 js文件
jquery方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- CentOS安装Oracle官方JRE
CentOS自带的JRE是OpenJDK,因为一些原因,需要换用Oracle官方出品的JRE. Oracle JRE下载地址http://java.com/zh_CN/(下载时注意选择相应版本) 可以 ...
- 常用的tagVARIANT结构【整理】
VARIANT数据结构包含两个域(如果不考虑保留的域).vt域描述了第二个域的数据类型.为了使多种类型能够在第二个域中出现,我们定义了一个联合结构.所以,第二个域的名称随着vt域中输入值的不同而改变. ...
- [转帖收集] Java注解
1.Annotation 它的作用是修饰编程元素.什么是编程元素呢?例如:包.类.构造方法.方法.成员变量等.Annotation(注解)就是Java提供了一种元程序中的元素关联任何信息和任何元数据( ...
- django用户认证系统——修改密码6
再此之前我们已经完成了用户登录.注册.注销等功能,接下来让我们继续为用户提供修改密码的功能.该功能 Django 的 auth 应用也已经为我们提供,过程几乎和之前的登录功能完全一样. 编写修改密码模 ...