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 当前激活的路由对象的更多相关文章

  1. vue常用的路由对象

    官网上解释:一个路由对象表示当前激活的路由的状态信息 路由对象,在组件内即this.$route,存着一些与路由相关的信息,当路由切换时,路由对象会被更新 //如果要在刷新页面时候通过路由的信息来操作 ...

  2. ASP.NET Web API 路由对象介绍

    ASP.NET Web API 路由对象介绍 前言 在ASP.NET.ASP.NET MVC和ASP.NET Web API这些框架中都会发现有路由的身影,它们的原理都差不多,只不过在不同的环境下作了 ...

  3. vue路由对象($route)参数简介

    路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...

  4. Vue-Router路由 Vue-CLI脚手架和模块化开发 之 使用路由对象获取参数

    使用路由对象$route获取参数: 1.params: 参数获取:使用$route.params获取参数: 参数传递: URL传参:例 <route-linke to : "/food ...

  5. 路由对象route

    路由对象是不可变 (immutable) 的,每次成功的导航后都会产生一个新的对象.不过你可以 watch (监测变化) 它. 通过 this.$route 访问当前路由,还可以通过router.ma ...

  6. Vue-Router路由Vue-CLI脚手架和模块化开发 之 使用props替代路由对象的方式获取参数

    在上一章博文中使用路由对象$route获取参数时,组件和路由对象耦合,在这篇博文中就可以使用props来进行解耦: 1.在组件中使用props选项定义数据,接收参数: 2.在路由中,使用props选项 ...

  7. vue 路由对象(常用的)

    路由对象 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. 路由对象暴露了以下属性: $route.path ...

  8. vue 路由对象

    路由对象在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以下属性: 1.$rout ...

  9. vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件

    后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换(不会刷新页 ...

随机推荐

  1. linux下生成带符号的随机密码

    cat /dev/urandom |tr -dc "[:graph:]"|fold -w 15|head 结果如下:

  2. WebExtensions小例

    一:简述 扩展是修改Web浏览器功能的代码位.它们使用标准的Web技术(JavaScript,HTML和CSS)以及一些专用的JavaScript API编写.其中,扩展程序可以向浏览器添加新功能或更 ...

  3. D3——基本知识点

    选择器: d3.select - 从当前文档中选择一个元素 d3.selectAll - 从当前文档中选择多个元素 selection.append - 创建并追加一个新元素 selection.at ...

  4. AngularJs学习笔记--Dependency Injection(DI,依赖注入)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...

  5. excel 在web导入到数据库的操作方法

    这个操作的大致步骤是把本地文件存入到服务器端,然后再读取服务端的文件并且使用NPOI这个第三方的插件去读取文件导入到数据库批量插入需要注意的是,前端需要使用form包裹type=file的文件标签,并 ...

  6. nginx里配置跨域

    发布于 881天前  作者 wendal  1404 次浏览  复制  上一个帖子  下一个帖子  标签: nginx 跨域 if ($request_method = OPTIONS ) { add ...

  7. PhoneGap 的消息推送插件JPush极光推送

    一. 什么是极光推送 极光推送,使得开发者可以即时地向其应用程序的用户推送通知或者消息,与用户保持互动, 从而有效地提高留存率,提升用户体验.平台提供整合了 Android 推送.iOS 推送的统一推 ...

  8. 在Go语言中记录log:seelog包

    前两周调bug调的吐血,虽然解决了但是还是挺浪费时间的.跟同事聊了聊,觉得我们现在项目中的日志记录太少了,导致出了问题不知道怎么下手,还得自己改代码记录日志,然后排查问题.这样如果将来还有bug的话还 ...

  9. Linux 查看所有登录用户的操作历史

    在linux系统的环境下,不管是root用户还是其它的用户只有登陆系统后用进入操作我们都可以通过命令history来查看历史记录,可是假如一台服务器多人登陆,一天因为某人误操作了删除了重要的数据.这时 ...

  10. 苹果手机(ios系统)蓝牙BLE的一些特点

    摘自<BluetoothDesignGuidelines.pdf>文档 1. pairing: 苹果手机无法主动发起SMP配对流程,可通过以下两种方式发起配对流程: (1)从端主动发起配对 ...