前言：

上一篇文章已經介紹瞭如何路由傳遞引數的第一種方法：在查詢引數中傳遞引數，這篇文章來分享路由傳遞引數的第二種方式，在URL中傳遞引數。

第一步：

1.修改app-routing.module.ts路由配置關於product的path屬性，使其攜帶id引數

    const routes: Routes = [ 
       {path: '', component:HomeComponent}, //具體路由放在最前面
       {path: 'product:/id', component:ProductComponent}, //路由通過URL傳資料,--1.第一步修改了路由配置的path屬性，時期攜帶id引數
 

       {path:'**',component:Code404Component}, //萬用字元路由放在最後面
    ];

第二步：

在appcomponent.html中
routerlink是一個數組，我們可以增加元素，這裡要和app-routing.module.ts裡面路由配置path屬性對應，第一個元素是固定的product，第二個是我們的id引數

<a [routerLink]="['/product',1]">商品詳情</a>

可以看出來我們的URL路徑已經變成了/product/1了

第三步：

更改商品資訊元件，從URL中取傳遞過來的引數值，與查詢引數傳遞類似，只是將queryparams改為params.
 

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; //定義一個變數來接收路由傳遞過來的productId

    constructor(private routeInfo: ActivatedRoute) { }

    //從查詢引數裡面去取改為從URL中去取，將原來的queryparams改為params
    ngOnInit() {
    //通過引數快照去獲取到id
    this.productId=this.routeInfo.snapshot.params["id"];
     }
    }

效果展示：