Angular里的购物车页面实现

需求：我在某个产品明细页面点击了"Buy"按钮后，将该产品成功添加到了购物车里，但是没能显示购物车的页面。本文则实现这个购物车的显示页面。

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

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

红色高亮代码是新添加的：

测试：点击Checkout之前，注意地址栏的url：

点击之后：

下面在cart Component里显示购物车里的内容。将Cart Service通过构造函数注入的方式注入cart Component：

定义items属性，用于存储在Cart Component view上显示的数据：

在Cart view显示时，调用cart service给items属性赋值：

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

在cart Component的模板里，依次显示items属性的内容：

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

测试：选中两个产品，进入明细页面，点击Buy按钮后，点击checkout，route到购物车的页面，此时这两个产品已经出现在cart Component的view里了：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular里的购物车页面实现相关推荐

angular里的filter过滤数据传参
在ng-repeat中使用过滤器filter ,则在filter闭包内第一个参数,就是ng-repeat中的原数组,其余参数可以在-repeat表达式中,使用filterName :param1 :p ...
电商前台项目（五）：完成加入购物车功能和购物车页面
Vue2项目前台开发:第五章一.加入购物车 1.路由跳转前先发请求把商品数据给服务器 (1)观察接口文档 (2)写接口 (3)dispatch调用接口传数据 (4)判断服务器是否已经收到商品数据 2 ...
模拟购物车页面全选单选的金额累加
1.前面部分的内容就不过多说明了,就是OkGo请求数据然后封装适配器加入数据源,先上代码先上适配器的代码,注意这里使用的万能适配器,加入依赖 implementation 'com.github.C ...
php实用技术：制作购物车页面
这几日,和同事讨论除了定义session数组外,其他的利用php制作电商购物车页面的技巧和这个技巧的雷区后,我们决定将代码放出来,和大家一起分享,共同进步. ok,进入主题. 主题逻辑分析: 购物车页 ...
微信小程序实现购物车页面
微信小程序实现购物车页面先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品.当购物车为空时,页面会变为空购物车的布局根据设计图,我们 ...
uni-app/Vue实现购物车页面功能的业务逻辑
uni-app/Vue实现购物车页面功能的业务逻辑用户在商品列表页或者商品详情页进行添加到购物车操作.把此商品需要在购物车渲染的数据整理好一个对象,转存到Vuex中在购物车页面渲染列表数据购物 ...
angular跳转指定页面_通过 angular CDK 实现页面元素拖放
通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能,如元素在页面中随意拖动.在特定区域内拖动亦或对列表进行拖放排序等等. 通过 angular CDK 实现 ...
php购物车修改单价,php – woocommerce在结帐和购物车页面更改价格
通过woocommerce,在我的网站中,我想在购物车页面中添加一个选择输入,用户可以在两个选项之间选择一个值,并根据此值我将更改价格. 到目前为止,我可以获得总数并使用此更改它: function ...
微信小程序|开发实战篇之十一---商品页面和购物车页面
products页面和cart页面 1.商品页面解构 2.购物车页面解构 1.商品页面解构修改数量这里使用picker组件: 加入购物车动画,使用css动画中的贝塞尔曲线作为运动速率,从点击起始位置 ...

Angular里的购物车页面实现

Angular里的购物车页面实现相关推荐

最新文章

热门文章