天天看點

Angular路由開發的一個實際例子

生成一個新的Component:

Angular路由開發的一個實際例子

在NgModule檔案app.module.ts裡,找到RouterModule.forRoot, 新增一條路由資訊:

Angular路由開發的一個實際例子
Angular路由開發的一個實際例子

這條路由資訊将url同Component ProductDetailsComponent關聯起來。

我們期望實作的效果是,使用者點選産品清單時,跳轉到産品明細頁面去。是以,打開product-list Component的模闆,在标簽a上增加路由資訊:[routerLink]="[’/products’, productId]"

Angular路由開發的一個實際例子

同時,這個productId變量尚未在product list Component裡聲明,是以需要增添一行:index as productId:

Angular路由開發的一個實際例子

最後的效果:

點選product name超連結後:

Angular路由開發的一個實際例子

跳轉到product明細頁面:

Angular路由開發的一個實際例子

繼續閱讀