Question

我遇到了一个问题，我不知道如何摆脱它。我有两个组件sibiling：

显示产品列表，其中包含每个产品的按钮，这些产品从购物车中删除了一个REST API上带有POST调用的单个产品。

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

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

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

使用共享服务;
使用@Input和@Output

我已尝试使用第一个选项，但没有成功，我也尝试使用@input和@Output，但我不认为我真的理解如何在两个组件之间使用它而不是＆＃39 ; t父母＆gt;孩子或对面。

我需要的是从 CARTITEMS.COMPONENT 中的 CARTTOTAL.COMPONENT 中调用 GetTotals 功能来更新价格。

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

这里是代码：

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

从组件的提供者中删除服务TotalguestcartService并将其放入app-module的提供者：发生了什么：每个组件都获得了服务的本地副本，因此他们无法交换信息，因为有两个服务注入。只要组件没有自己的提供者，将其设置为全局（app.module）就可以为每个组件提供它。

Answer 2

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

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

我们可以设置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。当然，这也可以在其他方法中使用，例如添加和更新（如果需要）。

希望这有帮助！：）

删除产品

2 个答案: