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的方法，如果同一个页面显示两次，传递不同的参数，快照版式无法实时获取新的参数。