第一种:
<a [routerLink]="['/product']" [queryParams]="{id: 1}">商品详情</a>
第一种接收参数:
export class ProductComponent implements OnInit {
private productId: number;
constructor(private routeInfo: ActivatedRoute) {
}
ngOnInit() {
this.productId = this.routeInfo.snapshot.queryParams["id"];
}
}
<p> product works! </p>
商品Id{{productId}}
第二种: const routes: Routes = [ { path:'', component: HomeComponent }, { path: 'product/:id', component: ProductComponent } , { path: '**', component: Code404Component } ]; <a [routerLink]="['/product',1]">商品详情</a>
第二种接收参数: export class ProductComponent implements OnInit { private productId: number; constructor(private routeInfo: ActivatedRoute) { } ngOnInit() { this.productId = this.routeInfo.snapshot.params["id"]; } }
参数订阅:
ngOnInit() { this.routeInfo.params.subscribe((params: Params)=> this.productId=params["id"]); //this.productId = this.routeInfo.snapshot.params["id"]; }
参数快照:
ngOnInit() { //this.routeInfo.params.subscribe((params: Params)=> this.productId=params["id"]); this.productId = this.routeInfo.snapshot.params["id"]; }