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

猜你喜欢

转载自www.cnblogs.com/nw0220/p/9201963.html