无法从Angular 2中获取服务数据

Question

这是使用Rails API的简单购物车应用程序。 我在ShowComponent中有addToCart按钮和CartComponent的项目。 我有CartService主推车功能。 这是我的cart.service：

import {Injectable} from '@angular/core';
import {Item}       from './cart/cart';

@Injectable()
export class CartService {

  private cartItems:Item[] = [];

  constructor() {}

  getCart() {
    return this.cartItems;
  }

  addToCart(pizza, qtyString:string = "1") {
    let qty = Number(qtyString);
    console.log(typeof qty, qty);
    console.log(typeof pizza, pizza);
    if (this.cartItems.length == 0) {
      this.cartItems.push(new Item(pizza['title'], pizza['price'], qty));
      console.log(this.cartItems);
    } else {
      for(let i = 0; i < this.cartItems.length; i++) {
        if (this.cartItems[i].title == pizza.title) {
            console.log(this.cartItems[i].qty);
          this.cartItems[i].qty += qty;
          return true;
        };
      }
      this.cartItems.push(new Item(pizza.title, pizza.price, qty));
    }
  }

  deleteItems(pizza) {
    this.cartItems.splice(this.cartItems.indexOf(pizza), 1);
  }
  editItems(value, i) {
    this.cartItems[i].qty = +value;
  }
}

我在show.component.html中使用addToCart函数来添加项目并且所有工作正常（我的结果中包含所有数据的对象）。 但是当我尝试去购物车时，我无法获得这些数据（this.cartItems.length == 0）。 这是我的CartComponent：

import {Component, OnInit} from '@angular/core';
import {CartService}       from '../cart.service';
import {Pizza}             from '../pizza';
import {Item}              from './cart';
import {Router}            from '@angular/router';

@Component({
  moduleId:    module.id,
  selector:    'app-cart',
  templateUrl: 'cart.component.html',
  styleUrls:   ['cart.component.css']
})
export class CartComponent implements OnInit {
    cartItems = [];

  constructor(private cartService: CartService, private router: Router) {}

  ngOnInit() {
    this.cartItems = this.cartService.getCart();
    console.log(this.cartItems.length);
  }

  getTotalPrice() {
    let total = 0;
    this.cartItems.forEach((pizza: any, i:number) => {
      total += pizza.price * pizza.qty;
    })
    return total;
  }
}

这是我的物品模型：

export class Item {
  constructor(public title:string, public price:number, public qty:number) {}
}

我该怎么做才能得到它？ 谢谢

Answer 1

您的代码没有提供程序声明，让Angular知道如何实例化CartService。 最简单的解决方法是将它添加到CartComponent的装饰器@Component：

providers: [CartService]

但您需要根据应用逻辑确定添加提供商的最佳位置。 这可以在组件，其父项或应用程序级别（在@NgModule装饰器中）完成。

请记住，如果在组件级别声明提供程序，则每次创建CartComponent时都会创建一个新的CartService实例（例如，导航到购物车路径，返回，再次导航将创建2个实例）。 由于您的代码使用带[]的购物车项目初始化数组，因此每当创建CartComponent的新实例时，其内容都将被删除。

Answer 2

如果我是你，我会将你的数据保存到后端（通过HTTP请求），然后在“显示”页面上检索它。