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的方法，如果同一個頁面顯示兩次，傳遞不同的參數，快照版式無法實時獲取新的參數。