Question

这是我的第一个Angular应用程序，它基于tutorial。

我创建了一个CartService来管理我的购物车，一个CartComponent显示在我的导航栏中，一个CartReviewComponent用于审核购物车。

CartService位于app.module.ts的提供者数组中。 我相信，这基本上会创建一个单身人士。

NavbarComponent位于带有路由的app.component.html文件中。

将产品添加到购物车后，导航栏中的CartComponent会观察更改并更新以显示总$。

一旦我在其他地方（另一个页面或购物车评论）进行路由，导航栏中的CartComponent就会显示空的购物车。

如何将数据保存在购物车中，以便在我更改页面时购物车不为空？

感谢。

这是CartService：

import {Injectable} from "@angular/core";
import {OrderedItem} from "../models/OrderedItem";
import {Subject} from "rxjs/Subject";


@Injectable()

export class CartService {

private orderedItems: OrderedItem[] = [];

//observable number sources
private cartPriceTotalSource = new Subject<number>();
private cartItemTotalSource = new Subject<number>();

//observable number streams
cartPriceTotal$ = this.cartPriceTotalSource.asObservable();
cartItemTotal$ = this.cartItemTotalSource.asObservable();

//message commands
addToCart(item: OrderedItem) {
    this.orderedItems.push(item);
    this.calculateCartTotals();
}

private calculateCartTotals()
{
    let items = 0;
    let price = 0;

    this.orderedItems.forEach((element) => {
        items += element.quantity;
        price += element.quantity * element.item.price;
    });

    this.cartItemTotalSource.next(items);
    this.cartPriceTotalSource.next(price);
}

}

******* ********** UPDATE

这是CartComponent：

import {Component} from "@angular/core";
import {OrderedItem} from "../../models/OrderedItem";
import {CartService} from "../../services/cart.service";


@Component({
    selector: "my-cart",
    templateUrl: "app/components/cart/cart.component.html",
    styleUrls: ["app/components/cart/cart.component.css"]
})

export class CartComponent {

    itemTotal: number = 0;
    priceTotal: number = 0;

    constructor(
        private cartService: CartService
    ) {
        cartService.cartItemTotal$.subscribe(
            itemTotal => this.itemTotal = itemTotal
        );

        cartService.cartPriceTotal$.subscribe(
             priceTotal => this.priceTotal = priceTotal
        );
    }
}

Answer 1

上面发布的所有代码似乎都是正确的（或者现在足够正确）。

我的麻烦在于我用href="the-defined-route"浏览了我的路线。

正确的方法是访问[routerLink]指令，如下所示：

[routerLink]="['/the-defined-route']"

我意识到href方式正在创建服务类的新实例，也许还有整个导航栏。

如果有人能够准确地解释发生了什么，我将不胜感激。

Angular2服务不持久化数据

1 个答案: