angular入门篇3----购物车添加

Angular入门3

1. 购物车组件

我们先把项目的内容丰富一下。

1.1 创建购物车功能

Store/src/app/model下，创建:

cart.model.ts

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { Injectable } from"@angular/core";
import { Product } from "./product.model";

@Injectable()
export class Cart{
    public lines: CartLine[]= [];
    public itemCount : number = 0;
    public cartPrice : number = 0;

    addLine(product:Product, quantity: number=1){
        let line=this.lines.find(line => line.product.id == product.id);

        if(line!= undefined) {
            line.quantity += quantity;
        }else{
            this.lines.push(new CartLine(product, quantity));
        }
        this.recalculate();
    }

    updateQuantity(product: Product, quantityEventTarget: EventTarget|null) {
        let quantity;
        if(quantityEventTarget==null) quantity=0;
        else{
            let quantityObject =quantityEventTarget as HTMLInputElement;
            quantity= quantityObject.value;
        }
        let line = this.lines.find(line => line.product.id == product.id);
        if(line != undefined) {
            line.quantity =Number(quantity);
        }
        this.recalculate();
    }

    removeLine(id:number) {
        let index = this.lines.findIndex(line => line.product.id == id);
        //总金额减少
        let line = this.lines.find(line => line.product.id == id) ?? null;
        if(line != null)
          this.cartPrice -= line.quantity*line.product.price;

        this.lines.splice(index, 1);
    }

    clear() {
        this.lines = []
        this.itemCount = 0;
        this.cartPrice = 0;
    }

    private recalculate() {
        this.itemCount = 0;
        this.cartPrice = 0;
        this.lines.forEach(l =>{
            this.itemCount += l.quantity;
            this.cartPrice += (l.quantity*l.product.price)
        })
    }

}

export class CartLine {
    constructor(public product: Product, public quantity: number) { }

    get lineTotal() {
        return this.quantity*this.product.price;
    }
}

在model.module.ts中完成注册:

1.2 在store文件注册购物车

在Store/src/app/store中添加购物车

在Store/src/app/store创建:

cartSummary.component.ts

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from "@angular/core";
import { Cart } from "../model/cart.model";

@Component({
    selector: "cart-summary",
    moduleId: module.id,
    templateUrl: "cartSummary.component.html"
})

export class CartSummaryComponent{
    constructor(public cart: Cart) { }
}

cartSummary.component.html

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="pull-xs-right">
    <small>
        Your Cart:
        <span *ngIf="cart.itemCount > 0">
            {{ cart.itemCount }} item(s)
            {{ cart.cartPrice | currency: "USD" : true: "2.2-2"}}
        </span>
        <span *ngIf="cart.itemCount == 0">
            (empty)
        </span>
    </small>
    <button class="btn btn-sm bg-inverse" [disabled]="cart.itemCount == 0" routerLink="/cart">
        <i class="fa fa-shopping-cart" aria-hidden="true" ></i> 
    </button>
</div>