第一篇文里学习了在路由的基础知识，了解了路由5个对象Routes,RouterLink,RouterOutlet,Router的写法，这篇文里来学习如何在路由时传递数据, 还有如何使用ActivatedRoute的使用方法

传递数据方式主要有3种，说明：

第一种：在查询参数中传递数据

/product?id=1&name=2 => ActivatedRoute.queryParams[id]

第二种：在路由路径中传递数据

{ path: /product/:id } =>/product/1 => ActivatedRoute.params[id]

第三种：在路由配置中传递数据

·{ path: /product, component: ProductComponent, data:[{ isProd:true }]} => ActivatedRoute.data[0][isProd]


一.在查询参数中传递数据

步一：在app.component.html中

<a [routerLink] = "['/product']" [queryParams] = "{id:1}">产品ID</a>

步二：在product.component.ts中接收参数

import {ActivatedRoute} from '@angular/router';

export class ProductComponent implements OnInit {

private productId : number ；

constructor(private routerInfo : ActivatedRoute){ }

ngOnInit() {

this.productId = this.routerInfo.snapshot.queryparams["id"];

}

}

步三：在product.component.html中

<p>产品Id是：{{productId}}</p>

二.在路由路径中传递数据

步一：在app-routing.module.ts

{ path : ' product / : id ', component : ProductComponent }

步二：在app.component.html中

<a [routerLink] = "['/product',1]">商品详情</a>

步三：在product.component.ts中

import {ActivatedRoute} from '@angular/router';

export class ProductComponent implements OnInit {

private productId : number

constructor(private routerInfo : ActivatedRoute){ }

ngOnInit() {

this.productId = this.routerInfo.snapshot.params["id"]；

}

}