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里了：