生成一個(gè)新的Component：

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

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

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

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

最后的效果：

點(diǎn)擊product name超鏈接后：

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

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

總結(jié)

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

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