appcomponent-html：

<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/product']" [queryParamMap]="{id:1}">商品詳情</a>

<!--通過router物件來導航-->
<input tyoe="button" value="商品詳情" (click)="toProductDetails()">


<!--路由插座：導航的元件顯示在router-outlet位置上-->
<router-outlet></router-outlet>
`
 

productcomponent.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 routerInfo: ActivatedRoute) { }

  ngOnInit() {
    this.productId = this.routerInfo.snapshot.queryParamMap['id'];
  }
}
 

報錯：

Can't bind to 'queryParamMap' since it isn't a known property of 'a'. ("

<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/product']" [ERROR ->][queryParamMap]="{id:1}">商品詳情</a>

解決：把 queryParamMap 改為 queryparams ,但是官方文件說提供前者，後者將逐漸被廢棄。