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(#号)来实现不同页面之间的切换(不会刷新页 ...
随机推荐
- 使用jxls技术导入Excel模版数据(转自其他博客)
第一步:先确定好Excel导入的格式以及各表格字段值的含义 第二步:定义好解析的XML--videoConfig.xml <?xml version="1.0" encodi ...
- devexpress chart 散点图加载并分组显示(可以自定义颜色 同组中的点颜色相同)
this.dChart.Diagram.Series.Clear();//清空图的内容 var groups = result.GroupBy(itm => itm["flag&quo ...
- [翻译]Elasticsearch重要文章之二:堆内存的大小和swapping
Elasticsearch默认安装后设置的内存是1GB,对于任何一个业务部署来说,这个都太小了.如果你正在使用这些默认堆内存配置,你的集群配置可能有点问题. 这里有两种方式修改Elasticsearc ...
- eclipse通过maven进行打包并且对hdfs上的文件进行wordcount
在eclipse中配置自己的maven仓库 1.安装maven(用于管理仓库,jar包的管理) -1.解压maven安装包 -2.把maven添加到环境变量/etc/profile -3.添加mave ...
- sqlite 用法整理
转载:http://blog.csdn.net/zhaoweixing1989/article/details/19080593 先纪录到这,以后慢慢整理. 1. 在Android下通过adb she ...
- !important 语法
语法: Selector{sRule!important;} 说明: 提升指定样式规则的应用优先权. IE6及以下浏览器有个比较显式的支持问题存在,!important并不覆盖掉在同一条样式的后面的规 ...
- 浅谈js冒泡事件2
js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...
- 【[USACO08FEB]酒店Hotel】
比较基础的线段树了 我们要维护最大连续子串,这个可以说是一个比较套路的操作了 我们在[SHOI2009]会场预约这道题中已经比较深刻的认识到了这个套路了 对于这道题,我们显然要知道一个区间内最大的全为 ...
- 【转】Android之drawable state各个属性详解
我们在定义一个drawable的时候可以通过xml定义的drawable对象.它使得一个图片能在不同的状态下显示不同的图案,比如一个Button,它有pressed,focused,或者其它状态,通过 ...
- ResourceWarning: unclosed <socket.socket fd=864, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=0, laddr=('10.100.x.x', 37321), raddr=('10.1.x.x', 8500)>解决办法
将代码封装,并使用unittest调用时,返回如下警告: C:\python3.6\lib\collections\__init__.py:431: ResourceWarning: unclosed ...