生成一個新的Component：

在NgModule文件app.module.ts里，找到RouterModule.forRoot, 新增一條路由信息：

這條路由信息將url同Component ProductDetailsComponent關聯起來。

我們期望實現的效果是，用戶點擊產品列表時，跳轉到產品明細頁面去。因此，打開product-list Component的模板，在標簽a上增加路由信息：[routerLink]="[’/products’, productId]"

同時，這個productId變量尚未在product list Component里聲明，因此需要增添一行：index as productId：

最后的效果：

點擊product name超鏈接后：

跳轉到product明細頁面：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular路由开发的一个实际例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。