生成一個新的Component：

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

這條路由信息將url同Component ProductDetailsComponent關(guān)聯(lián)起來。

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

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

最后的效果：

點擊product name超鏈接后：

跳轉(zhuǎn)到product明細頁面：

要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。