一、在查询参数中传递参数
- 修改app.component.html中的商品详情页a标签
<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情页</a>
- 修改product.component.ts接收传递过来的参数
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;
constructor(private routeInfo: ActivatedRoute) { }
ngOnInit() {
this.productId = this.routeInfo.snapshot.queryParams['id'];
}
}
- 修改product.component.html,新增
<p> 商品ID : {{productId}} </p>
- 访问localhost:4200点击商品详情连接测试
二、在路由路径(url)中传递参数
- 修改路由配置中的path属性,使其可以传递参数 app-routing.module.ts
{path: 'product/:id', component: ProductComponent}
- 修改app.component.html 商品详情页链接
<a [routerLink]="['/product',1]">商品详情页</a>
- 修改product.component.ts 接收参数的配置 queryParams改为params
ngOnInit() {
this.productId = this.routeInfo.snapshot.params['id'];
}
- 访问localhost:4200 测试
三、在路由配置中传递参数
- 修改app.component.ts中的toProductDetails()
toProductDetails() {
this.router.navigate(['/product', 2]);
}
- 把product.component.ts中ngOnInit()从参数快照改为参数订阅
ngOnInit() {
this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);
}
四、访问localhost:4200 点击商品详情链接和按钮都可以分别获取到数据