【Angular4学习】--路由传参一(在查询参数中传递数据)

前言

路由时传递参数有什么意义呢？举个简单的例子，我们进入了某宝或某东，点击了某个商品之后会指定跳转到相应的页面，这个时候我们知道在我们点击商品时候页面进行了跳转，从商品陈列页面到了商品详情页面，为什么正好能调到我们点击的那个商品页面呢，因为路由在跳转时传递了点击商品的数据。那么它就是怎么实现传递参数呢？

方式

路由传递数据的方式有三种，分别是

1. 在查询参数中传递数据
2. 在路由路径中传递数据
3. 在路由配置中传递数据

方式一：在查询参数中传递

1.在app.component.html中, 编辑queryParams

<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>
2.保存后会发现我们的路由地址已经发生了变化，多了个id=1的参数

2.上一步传了参数之后，这一步需要在商品详情组件的product.component.ts中接收参数。这里就用到了上篇博客中我们提到的第五个对象ActivatedRoute。
name如何获得ActivatedRoute的参数呢，我们需要先在构造函数中注入。

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
private productId:number; //声明一个变量来接收路由传递过来的productId
//定义一个构造方法，注入ActivatedRoute参数
constructor(private routeInfo: ActivatedRoute) { }
ngOnInit() {
this.productId=this.routeInfo.snapshot.queryParams["id"];  //通过参数快照获得传递过来的id参数的值，然后赋给了productId
  }
}

3.通过插值表达式把ts里面接收到的路由参数ProductComponent对象本身的product属性在页面上显示

<p>
这里是商品详情组件！
</p>
<!-- 通过插值表达式把ts里面接收到的路由参数ProductComponent对象本身的product属性在页面上显示 -->
<p>
商品ID是:{{productId}}
</p>

效果展示

总结

关于通过查询参数传递路由数据的demo展示到这里，下篇文章分享在URL中传递参数。未完待续，感谢您的阅读……