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(#号)来实现不同页面之间的切换(不会刷新页 ...
随机推荐
- swoole 创建tcp服务器
server.php <?php /** * 创建tcp服务器 * Date: 2019/1/15 */ $serv = new swoole_server('127.0.0.1', 9501) ...
- SiP封装成超越摩尔定律的要塞,日月光/安靠/长电科技谁将赢取IC封装的未来
来源:EEFOCUS 进入2017年,摩尔定律的脚步愈加沉重,"摩尔定律已死"的言论笼罩着整个半导体行业,超越摩尔定律发展的想法在半导体从业人员的脑海里更清晰了.在这样的大环境下, ...
- C#启动服务
启动服务的方法有很多种,简单的cmd下dos命名,手动启动,还有C#代码启动. 我们要实现的功能: 判断是否安装 是否启动 启动服务 关闭服务 我封装了有关服务的代码,如下: using System ...
- “云中论道”之——使用开源技术和Azure公有云服务快速搭建云端IoT解决方案(上)
“云中论道”技术课堂第一课开讲啦!微软各路技术咖们齐聚一堂,为大家带来干货不断!作为“云中论道“课堂的开课之作,我们首先邀请到了微软Azure专家级的架构师:槐长清,他为我们带来了关于“使用开源技术和 ...
- SQL Server ->> SQL Server 2016重要功能改进之 -- INSERT SELECT时并发插入数据
SQL Server 2016对INSERT INTO XXXX SELECT语句进行了优化,在某些情况下可以触发数据的并行插入,但是要求兼容模式是130(SQL Server 2016)以及在插入的 ...
- javascript 时间日期处理相加,减操作方法js
javascript 时间日期处理相加,减操作方法js function dateAddDays(dataStr,dayCount){ var strdate = dataStr; // 2017年0 ...
- 华为HCNP实验 DHCP配置
HCNP实验 DHCP配置 学习目的 1.掌握ip pool的配置方法2.掌握DHCP服务器的配置方法3.掌握DHCP客户端的配置方法4.掌握DHCP中继的配置方法5.掌握DHCP Snooping的 ...
- 第六周 day6 python学习笔记
1.Python面向对象编程OOP(Object Oriented Programming) 封装:可以隐藏实现细节,使代码模块化 继承:可以扩展已存在的代码模块,可以使代码实现重用 多态:一种接口, ...
- 学习Road map Part 04 自动驾驶、SLAM、ROS、树莓派
学习Road map Part 04 自动驾驶.SLAM.ROS.树莓派
- Zabbix监控mysql主从状态并实现报警
一.环境需求 主机A: zabbix-server 主机B: zabbix-agent/mysql从 二.主机B操作 1.添加监控脚本 vim /data/zabbix/mysql_slave_che ...