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. selenium 滑动解锁(drag_and_drop_by_offset)

    from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains from ...

  2. ZT 绿茶和枸杞绝不可以同饮

    绿茶和枸杞绝不可以同饮 正文 我来说两句(人参与) 速腾试驾招募 预约得iPad Air! 2012年06月28日10:38 来源:中国网 打印 字号 大|中|小 绿茶含有儿茶素与β-胡萝卜素.维生素 ...

  3. 科普文:从人人网看网络科学(Network Science)的X个经典问题

    转:https://zr9558.wordpress.com/2013/12/05/科普文:从人人网看网络科学(network-science)的x个经典问/ 长文,写了N个小时写完的.你肯定能看懂, ...

  4. 杜比(dolby)自动关闭,windows10声音自动变小

    电脑问题描述:2018.01.21 win10更新后,看视频电脑声音自动变小,重开机电脑声音正常,一会又会变小.找了很多网上的东西,实践后发现是杜比(dolby)自动关闭导致的,自动关闭的原因是因为切 ...

  5. Ios国际化翻译工具

    IOS Translation Tool(IOS国际化翻译工具) 介绍 当IOS项目国际化的时候,手工去翻译每一个字符串是一件非常痛苦的事情.尤其是当项目中存在N多种语言.而且又很难保证,手工翻译的准 ...

  6. mac环境下安装posgreSQL,postGIS,pgrouting方法

    费了九牛二虎之力,终于安装成功...都是mac的坑,好好的window环境多好,非要换mac环境,导致软件配置极其的麻烦,window的环境下配置会少很多事,自己惹的祸自己担着吧还是.换mac要慎重, ...

  7. 20165322 第七周 mybash 的实现

    mybash的实现 要求 使用fork,exec,wait实现mybash 写出伪代码,产品代码和测试代码 发表知识理解,实现过程和问题解决的博客 相关函数的作用 fork fork()函数通过系统调 ...

  8. 页面间传递前端请求参数和获取参数:Model model,HttpServletRequest request, ModelMap map参数使用与区别

    Model model, HttpServletRequest request, ModelMap map声明变量 一.下面的方法是需要将请求发过来的数据(或者说参数)传递到重定向的页面/转发的页面的 ...

  9. 关于SQL注入中编码问题的疑问

    提到SQL注入的绕过,编码是其中最普通的一种方法,最常用的URL编码.之前一直有个疑问,编码与未编码到底有哪些地方存在区别? 以下是本人自己对URL编码的一些见解,可能有错误的地方欢迎大佬们指正. 什 ...

  10. Linux学习总结(十三)文本编辑器 vim

    vim是vi的升级版,会根据文本属性带色彩显示,具体用法如下: 一般模式 : 1.光标定位: 左右移动一个字符, h l上下移动一个字符, k j左右下上 ,左右在两边,下上在中间这样记光标定位行首 ...