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