Angular里的购物车页面实现
时间:2022-07-23
本文章向大家介绍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里了:
- Hive第二天学习内容总结Hive 第三天DDL特别注意一下,没事别删除数据DML
- Codeforces 791B Bear and Friendship Condition(DFS,有向图)
- Codeforces 791A Bear and Big Brother(暴力枚举,模拟)
- Selenium2+python自动化28-table定位
- POJ 2370 Democracy in danger(简单贪心)
- POJ 2209 The King(简单贪心)
- 使用 Vagrant 打造跨平台开发环境
- HDU 2084 数塔(简单DP入门)
- Python-解决Cx_Oracle查询时UnicodeDecodeError的问题
- “玲珑杯”ACM比赛 Round #12题解&源码
- NYOJ 题目77 开灯问题(简单模拟)
- python笔记2-冒泡排序
- Lucas定理学习(进阶中)
- Java8时间类使用方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux/CentOS系统同步网络时间的2种方法详解
- Linux 常用命令之Linux more命令使用方法
- Ubuntu下VIM配置成C++开发编辑器
- Ubuntu环境下使用G++编译CPP文件
- Linux下Tomcat的几种运行方式讲解
- linux中chmod命令用法详解
- Linux强制释放占用端口以及Linux防火墙端口开放方法详解
- CentOS7.5从零安装Python3.6.6的教程详解
- 实现一台或者多台Linux实例解绑SSH密钥对
- centos7切换启动内核与切换启动模式的讲解
- Ubuntu下Sublime Text无法输入中文最简单的解决方案
- 详解linux系统输入输出管理和vim的常用功能
- 查看远程 Linux 系统中某个端口是否开启的三种方法
- Linux使用iptables限制多个IP访问你的服务器
- 在 Linux 中不使用 CD 命令进入目录/文件夹的方法