《Angular2入门系列基础》——ActivatedRoute路由

前言

ActivatedRoute，当前激活路由对象，主要用于保存路由，获取路由传递的参数。

内容

一：传递参数的三种方式，以及ActivatedRoute获取他们的方式：

1.在查询参数中传递数据：

<span style="color:#000000"><code>/product?id=<span style="color:#006666">1</span>&name=<span style="color:#006666">2</span>
<span style="color:#880000">/**
获取参数
*/</span>
=>ActivatedRoute.queryParams[id]</code></span>

2.在路由路径中传递数据:

<span style="color:#000000"><code><span style="color:#880000">//路由配置</span>
{path:<span style="color:#009900">'/product/:id'</span>}
<span style="color:#880000">//路由显示方式Restful</span>
=>/product/<span style="color:#006666">1</span> 
<span style="color:#880000">/**
获取参数
*/</span>
=>ActivatedRoute.params[id]</code></span>

3.在路由配置中传递数据：

<span style="color:#000000"><code><span style="color:#880000">//路由配置</span>
{path:<span style="color:#009900">'/product'</span>,component:ProductComponent,data:[{isProd:<span style="color:#000088">true</span>}]}
<span style="color:#880000">/**
获取参数
*/</span>
=>ActivatedRoute.data[<span style="color:#006666">0</span>][isProd]</code></span>

二：ActivatedRoute接收参数类型

1.参数快照（snapshot）:

<span style="color:#000000"><code>import { Component, OnInit } from <span style="color:#009900">'@angular/core'</span>;
import{ActivatedRoute,Params} from  <span style="color:#009900">'@angular/router'</span>;

export <span style="color:#000088">class</span> <span style="color:#4f4f4f">ProductComponent</span> <span style="color:#000088">implements</span> <span style="color:#4f4f4f">OnInit</span> {
   constructor(<span style="color:#000088">private</span> activateInfo:ActivatedRoute) { }

  ngOnInit() {
   let id:string= <span style="color:#000088">this</span>.activateInfo.snapshot.params[<span style="color:#009900">"id"</span>];
   console.log(id);
  }

}</code></span>

2.参数订阅（subscribe）：

<span style="color:#000000"><code>import { Component, OnInit } from <span style="color:#009900">'@angular/core'</span>;
import{ActivatedRoute,Params} from  <span style="color:#009900">'@angular/router'</span>;
export <span style="color:#000088">class</span> <span style="color:#4f4f4f">ProductComponent</span> <span style="color:#000088">implements</span> <span style="color:#4f4f4f">OnInit</span> {

 constructor(<span style="color:#000088">private</span> activateInfo:ActivatedRoute) { }
productId:string;
  ngOnInit() {
    <span style="color:#000088">this</span>.activateInfo.params.subscribe(
    (params:Params)=>{
         <span style="color:#000088">this</span>.productId=params[<span style="color:#009900">"id"</span>];
         console.log(<span style="color:#000088">this</span>.productId);
     }
   )
  }
}</code></span>

这两种方式主要区别是由于nginit在页面第一次加载时会进行初始化，但是第二次不会走nginit的方法，如果同一个页面显示两次，传递不同的参数，快照版式无法实时获取新的参数，如图所示：
这里写图片描述
但是参数订阅却可以实时获取参数值：

总结

关于ActivatedRoute路由先介绍到这里，欢迎浏览，也希望把宝贵的建议奉上！感谢！

《Angular2入门系列基础》——ActivatedRoute路由

猜你喜欢