需求：我在某個(gè)產(chǎn)品明細(xì)頁面點(diǎn)擊了"Buy"按鈕后，將該產(chǎn)品成功添加到了購物車?yán)?#xff0c;但是沒能顯示購物車的頁面。本文則實(shí)現(xiàn)這個(gè)購物車的顯示頁面。

在app.module.ts里，增添一條到cart view的路由信息：

在top bar Component的checkout按鈕里，增添route到cart Component的功能：

紅色高亮代碼是新添加的：

測試：點(diǎn)擊Checkout之前，注意地址欄的url：

點(diǎn)擊之后：

下面在cart Component里顯示購物車?yán)锏膬?nèi)容。將Cart Service通過構(gòu)造函數(shù)注入的方式注入cart Component：

定義items屬性，用于存儲(chǔ)在Cart Component view上顯示的數(shù)據(jù)：

在Cart view顯示時(shí)，調(diào)用cart service給items屬性賦值：

this.items = this.cartService.getItems();

在cart Component的模板里，依次顯示items屬性的內(nèi)容：

<h3>Cart</h3><div class="cart-item" *ngFor="let item of items"><span>{{ item.name }}</span><span>{{ item.price | currency }}</span> </div>

測試：選中兩個(gè)產(chǎn)品，進(jìn)入明細(xì)頁面，點(diǎn)擊Buy按鈕后，點(diǎn)擊checkout，route到購物車的頁面，此時(shí)這兩個(gè)產(chǎn)品已經(jīng)出現(xiàn)在cart Component的view里了：

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

總結(jié)

以上是生活随笔為你收集整理的Angular里的购物车页面实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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