路由传参数
1、在查询时传参数
模板中示例：
<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>
在product组件中示例:
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;//定义接收的ID变量
constructor(private routeInfo:ActivatedRoute) { }
ngOnInit() {
/*通过 queryParams 方法取得参数*/
this.productId = this.routeInfo.snapshot.queryParams['id'];
}
}
在product模板中示例:
<p>
这是一个商品组件
</p>
<p>
查询参数传递过来的组件ID：{{productId}}
</p>
2、在路由路径中传递参数
2.1 修改数由配置app-routing.module.ts中的path属性，使其可以携带参数
{path:'product/:id',component:ProductComponent},
2.2 修改数由链接 routeLink的参数，使其可以传递参数
<a [routerLink]="['/product',1]">商品详情</a>
2.3 所ActivatedRoute中的queryParams ['id']改为params['id']
this.productId = this.routeInfo.snapshot.params['id'];
2.4 注意： activatedRouter 构造之后在ngOnInit （在组件第一次呈现的时候只被调用一次）生命周期中调用的snapshot是参数快照；
还有一种得参数订阅，如果在组件路由到自身的情况下，必须使用参数订阅（subscribe），才能取到动态的参数；
app.component.html中示例
<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product',1]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<!-- / 开头的叫根路由 ./ 开头的是子路由 -->
<!-- routerLink [] 里面可以传参数 -->
<!-- (click) 括号里面的是Angular的事件绑定用法 绑定到 组件控制器中的toProductDetails方法 -->
<!-- 路由暂位符号 -->
<router-outlet></router-outlet>
在product组件中示例
ngOnInit() {
/* 通过参数订阅取得数据 */
this.routeInfo.params.subscribe((param:Params)=>this.productId = param['id']);
/*通过 queryParams 方法取得参数快照*/
// this.productId = this.routeInfo.snapshot.params['id'];
}
在app.component组件中的控制器toProductDetails中示例：
toProductDetails() {
/* 通过控制器的navigate方法来路由到product组件上面 */
this.router.navigate(['/product',2]);
}
3、在路由配置中传递参数
