angular routing parameter

The first: 
<a [routerLink]= " ['/product'] " [queryParams]= " {id: 1} " >Product Details</a>

 

The first receives parameters:

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}} 

The second:
 const routes: Routes = [
  {
    path:'',
    component: HomeComponent
  },
  {
    path: 'product/:id',
    component: ProductComponent
  }
  ,
  {
    path: '**',
    component: Code404Component
  }
];
<a [routerLink]= " ['/product',1] " >Product Details</a>

The second receiving parameter:
export class ProductComponent implements OnInit {

  private productId: number;

  constructor(private routeInfo: ActivatedRoute) { }

  by OnInit () {
    this.productId = this.routeInfo.snapshot.params["id"];
  }

}

Parameter subscription:

  ngOnInit() {
    this.routeInfo.params.subscribe((params: Params)=> this.productId=params["id"]);
    //this.productId = this.routeInfo.snapshot.params["id"];
  }

 

Parameter snapshot:

  ngOnInit() {
    //this.routeInfo.params.subscribe((params: Params)=> this.productId=params["id"]);
    this.productId = this.routeInfo.snapshot.params["id"];
  }