删除产品后，Angular 2编辑购物车总数

Question

我被一个问题困住了，我不知道如何摆脱它。 我有两个组件兄弟：

一个显示产品列表的产品列表，每个产品都有一个按钮，通过一个 REST API 的 POST 调用从购物车中删除单个产品。

另一个组件简单地调用一个 REST API 来获取购物车的总数并显示它。

问题是当我从购物车中正确删除商品时，显然购物车总数不会自行更新。

所以，我搜索了社区，我认为有两种不同的解决方案：

• 使用共享服务；
• 使用@Input 和@Output

我尝试使用第一个选项，但没有成功，我也尝试使用 @input 和 @Output 但我不认为我真的了解如何在不是 Parent > Child 的两个组件之间使用它或对面。

我需要从 CARTITEMS.COMPONENT 调用 CARTTOTAL.COMPONENT 内的函数 GetTotals 来更新价格。 p>

我尝试在两个组件中注入相同的服务并从第一个组件调用该函数，但似乎不起作用。

代码如下：

cartitems.component.ts

import { Component, OnInit, Inject, Output } from '@angular/core';

import { ManageGuestCartService } from '../manageCartServices/addtoguestcart.service';
//import { CarttotalComponent } from '../carttotal/carttotal.component';

// Service for guest total cart
import { TotalguestcartService } from '../manageCartServices/totalguestcart.service';


@Component({
  selector: 'app-cartitems',
  templateUrl: './cartitems.component.html',
  styleUrls: ['./cartitems.component.css'],
  providers: [ManageGuestCartService, TotalguestcartService]
})

export class CartitemsComponent implements OnInit {

 itemofcart:any[];

  constructor(private _guestcartservice: ManageGuestCartService, private _totalguestcart: TotalguestcartService) { }

  ngOnInit() {
    this.listCartItems();
  }

  listCartItems() {

    return this._guestcartservice.getCartDetails()
        .subscribe(data => {
            this.itemofcart = data;
            //console.log(this.itemofcart); 
        },
      (err) => {
        //alert('vuoto'); 
      });

  }


  removeProductFromCart(itemid) {
      return this._guestcartservice.deleteProductFromCart(itemid)
      .subscribe(data => {
      //  this.itemofcart = data;
       // console.log(this.itemofcart); 
       this.listCartItems();
       this._totalguestcart.getTotals();
      },
      (err) => {
        alert('errore');
      });
  }

}

carttotals.component.ts

import { Component, OnInit, Input} from '@angular/core';

// Service for guest total cart
import { TotalguestcartService } from '../manageCartServices/totalguestcart.service';

@Component({
  selector: 'app-carttotal',
  templateUrl: './carttotal.component.html',
  styleUrls: ['./carttotal.component.css'],
  providers: [TotalguestcartService]
})
export class CarttotalComponent implements OnInit {

  constructor(private _totalguestcart: TotalguestcartService) { }

   totals:any[];

  ngOnInit() {
    this.retrieveTotals();
  }

  retrieveTotals() {
    return this._totalguestcart.getTotals()
    .subscribe(data => {
        this.totals = data;
        console.log(this.totals);
        },
      (err) => {
        alert(err); 
      });
  }

} 

totalguestcart.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions} from '@angular/http';

@Injectable()
export class TotalguestcartService {

  constructor(public http: Http) { }



    public getTotals() {
        let cartid;
                cartid = localStorage.getItem("guestCartId");

                let contentHeaders = new Headers();
                contentHeaders.append('Accept', 'application/json');
                contentHeaders.append('Content-Type', 'application/json');

                return this.http.get(URL, { headers: contentHeaders})
                //.map(res => res.json())
                  .map((res) => {
                        if(res.status == 404) {
                          return res.status;
                        } else {
                          return res.json();
                        }
                    });
    }

}

谁能给我正确的方法来解决这个问题？所有的提要都被接受:)

提前致谢！

Answer 1

如前所述，您需要在模块中标记您的提供程序，以便您在组件之间共享相同的服务。

共享服务在这里最好。据我了解，您希望在删除 cartitems 组件中的项目时触发 carttotals 组件中的事件。

我们可以设置 Observable 来触发该事件。所以在你的totalguestcart 服务中添加这个：

private fireEvent = new Subject<boolean>();

event = this.fireEvent.asObservable();

emitEvent(bool: boolean) {
  this.fireEvent.next(bool);
}

这里我们只是使用布尔值，因为您不需要传递任何特定值，而只需触发一个事件。

然后，当您执行删除时，让我们通知订阅此方法的其他组件应该触发该方法。

removeProductFromCart(itemid) {
  return this._guestcartservice.deleteProductFromCart(itemid)
    .subscribe(data => {
      this.itemofcart = data;
      this.listCartItems();
      this._totalguestcart.emitEvent(true); // add this!! 
    },
    (err) => {
      alert('error');
    });
 }

在您的购物车总数中，在您的构造函数中订阅它，然后执行getTotals 方法：

constructor(private _totalguestcart: TotalguestcartService) { 
  _totalguestcart.event.subscribe(res => {
      this.retrieveTotals();
  })
}

this.retrieveTotals 将在您每次删除项目时被触发。当然，这也可以用于其他方法，例如添加和更新（如果需要）。

希望这会有所帮助！ :)

Answer 2

将服务TotalguestcartService从组件的提供者中抛出，并将其放入应用模块的提供者中：发生了什么：每个组件都在获取服务的本地副本，因此它们无法交换信息，因为有两个服务注入。只要组件不做自己的提供者，将它放在全局（app.module）中即可为每个组件提供它。