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