《Angular2入门系列基础》——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路由先介绍到这里，欢迎浏览，也希望把宝贵的建议奉上！感谢 ！