ActivatedRoute 当前激活的路由对象
ActivatedRoute,当前激活的路由对象,主要用于保存路由,获取路由传递的参数。
一:传递参数的三种方式,以及ActivatedRoute获取他们的方式:
1.在查询参数中传递数据:
/product?id=1&name=2
/**
获取参数
*/
=>ActivatedRoute.queryParams[id]
2.在路由路径中传递数据:
//路由配置
{path:'/product/:id'}
//路由显示方式Restful
=>/product/1
/**
获取参数
*/
=>ActivatedRoute.params[id]
3.在路由配置中传递数据:
//路由配置
{path:'/product',component:ProductComponent,data:[{isProd:true}]}
/**
获取参数
*/
=>ActivatedRoute.data[0][isProd]
二:ActivatedRoute接收参数类型
1.参数快照(snapshot):
import { Component, OnInit } from '@angular/core';
import{ActivatedRoute,Params} from '@angular/router';
export class ProductComponent implements OnInit {
constructor(private activateInfo:ActivatedRoute) { }
ngOnInit() {
let id:string= this.activateInfo.snapshot.params["id"];
console.log(id);
}
}
2.参数订阅(subscribe):
import { Component, OnInit } from '@angular/core';
import{ActivatedRoute,Params} from '@angular/router';
export class ProductComponent implements OnInit {
constructor(private activateInfo:ActivatedRoute) { }
productId:string;
ngOnInit() {
this.activateInfo.params.subscribe(
(params:Params)=>{
this.productId=params["id"];
console.log(this.productId);
}
)
}
}
这两种方式主要区别是由于nginit在页面第一次加载时会进行初始化,但是第二次不会走nginit的方法,如果同一个页面显示两次,传递不同的参数,快照版式无法实时获取新的参数。
ActivatedRoute 当前激活的路由对象的更多相关文章
- vue常用的路由对象
官网上解释:一个路由对象表示当前激活的路由的状态信息 路由对象,在组件内即this.$route,存着一些与路由相关的信息,当路由切换时,路由对象会被更新 //如果要在刷新页面时候通过路由的信息来操作 ...
- ASP.NET Web API 路由对象介绍
ASP.NET Web API 路由对象介绍 前言 在ASP.NET.ASP.NET MVC和ASP.NET Web API这些框架中都会发现有路由的身影,它们的原理都差不多,只不过在不同的环境下作了 ...
- vue路由对象($route)参数简介
路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 使用路由对象获取参数
使用路由对象$route获取参数: 1.params: 参数获取:使用$route.params获取参数: 参数传递: URL传参:例 <route-linke to : "/food ...
- 路由对象route
路由对象是不可变 (immutable) 的,每次成功的导航后都会产生一个新的对象.不过你可以 watch (监测变化) 它. 通过 this.$route 访问当前路由,还可以通过router.ma ...
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 使用props替代路由对象的方式获取参数
在上一章博文中使用路由对象$route获取参数时,组件和路由对象耦合,在这篇博文中就可以使用props来进行解耦: 1.在组件中使用props选项定义数据,接收参数: 2.在路由中,使用props选项 ...
- vue 路由对象(常用的)
路由对象 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. 路由对象暴露了以下属性: $route.path ...
- vue 路由对象
路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...
- vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件
后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换(不会刷新页 ...
随机推荐
- abstract(抽象)修饰符
abstract(抽象)修饰符,可以修饰类和方法 1,abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型,也就是编译时类型,抽象类就像当于一类的半 ...
- wcf 访问控制
public class PasswordDigestChannelFactory<TPortTypeClient, TPlugin> where TPortTypeClient : Cl ...
- (转)从Python的0.1输出0.1000000000000001说浮点数的二进制
原文地址:http://blog.csdn.net/u012843100/article/details/60885763 今天在学习Python核心编程的时候,十进制浮点数那段看到一个有趣的事情. ...
- Spark 中的宽依赖和窄依赖
Spark中RDD的高效与DAG图有着莫大的关系,在DAG调度中需要对计算过程划分stage,而划分依据就是RDD之间的依赖关系.针对不同的转换函数,RDD之间的依赖关系分类窄依赖(narrow de ...
- 【设计模式最终总结】桥接模式 VS 外观模式
差异点 外观模式,是把功能通过一个接口提供出来,方便日后更换实现,或者这种实现可以由多方提供,但同时只用一个.典型例子:@Slf4j 桥接模式,多个维度,每个维度提供一个接口,这些接口集中在一个类中, ...
- 《SQL必知必会》总结
目录 第1章 了解SQL 第2章 检索数据 第3章 排序检索数据 第4章 过滤数据 第5章 高级数据过滤 第6章 用通配符进行过滤 第7章 创建计算字段 第8章 使用数据处理函数 第9章 汇总数据 ...
- RequireJS进阶-模块的优化及配置的详解
概述 关于RequireJS已经有很多文章介绍过了.这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性.这样,你将获得一些具有互相依赖关系 ...
- 奇葩拿shell + 提权wind08r2奇葩拿shell + 提权wind08r2戏
0x01 小隐拿站篇 某省还是市级还是县级的空防部 先来刺探目录,拿起御剑, 啪啪啪 (鼓掌)后台出来了 试试弱口令 擦 需要管理员验证码,这个咋玩????这个注入都不用找了,就算注射出账号密 ...
- Spring Framework5.0 学习(4)—— Bean的命名id和name区别
Spring中Bean的命名 1.每个Bean可以有一个id属性,并可以根据该id在IoC容器中查找该Bean,该id属性值必须在IoC容器中唯一: 2.可以不指定id属性,只指定全限定类名,如: & ...
- BZOJ2301:[HAOI2011]Problem b(莫比乌斯反演,容斥)
Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. Input 第一行一个整数 ...