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. SQL UNION操作符使用

    SQL UNION 操作符 SQL UNION 操作符合并两个或多个 SELECT 语句的结果. SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意 ...

  2. cocos2d-x 的api

    最近,在学习cocos2d-x,发现没有一个很好的api手册.因为起初我们学习一些例子之类的内容,会很容易使用,也很容易明白,但是当我们需要用新的api的时候,第一就会疑问有没有这个api,比如:你使 ...

  3. std::unique实现

    std::unique适用于将排过序的数据结构重复的部分全部放在结尾 但用的时候发现会将原先容器中的内容改掉,看了源码发现这个函数会将不重复的数据结构直接覆盖到前一个重复的位置上,下面看源码 该函数s ...

  4. 【[USACO08NOV]奶牛混合起来Mixed Up Cows】

    首先我们能够一眼看到4 <= N <= 16,那么就是它了,我们要压缩的状态就是它了 那么之后能我们用这个状态表示什么呢,我们要表示的显然是每只奶牛是否在队伍中 比如说10吧,转成二进制后 ...

  5. js 页面 json对象转数组

    json_array(data); function json_array(data){ var len=eval(data).length; var arr=[]; for(var i=0;i< ...

  6. 5.spring:注解配置 Bean

    在classpath中扫描组件 组键扫描:能够从classpath下自动扫描,侦测和实例化具有特定注解的组件 特定的组件包括: ->@Componment:基于注解,标识一个受Spring管理的 ...

  7. 面试准备——(二)专业知识(4)C/C++语言

    1. 预处理 断言 assert的功能,assert(statement),如果statement为真则程序继续执行,为假则整个程序中断退出 3. #define [ #ifndef DISKSIM_ ...

  8. 给windows添加路由

    route add 10.0.0.0 mask 255.0.0.0 172.16.1.253 -p

  9. 不推荐在iOS的浏览器应用上使用click和mouseover

    iOS上的Safari也支持click 和mouseover等传统的交互事件,只是不推荐在iOS的浏览器应用上使用click和mouseover,因为这两个事件是为了支持鼠标点击而设计 出来的.Cli ...

  10. Paxos一致性算法(三)

    一.概述: Google Chubby的作者说过这个世界只有一种一致性算法,那就Paxos算法,其他的都是残次品. 二.Paxos算法: 一种基于消息传递的高度容错性的一致性算法. Paxos:少数服 ...