import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './home/home.component';
import {ProductComponent} from './product/product.component';
import {Code404Component} from './code404/code404.component';
const routes: Routes = [
  {
    path: '',
    component:HomeComponent,
    children: []
  },
  {
    path:'product/',
    component:ProductComponent
  },
  {
    path:'**',
    component:Code404Component
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<a [routerLink]="['/']">首頁(yè)</a>
<a [routerLink]="['/product']" [queryParams]='{id:1}'>商品詳情頁(yè)</a>
<input type="button" name="" value="商品詳情" (click)='toProductDetails()'>
<router-outlet></router-outlet>

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

}

<p>
  這是product組件
</p>
<p>
商品id是{{productId}}
</p>