Question

我正在Angular4的电子商务网站上工作。我需要在导航栏中显示购物车中存在的一些项目，这些项目是在app.component中编写的，在我的产品详细信息页面中，存在添加到购物车选项。当用户点击添加到购物车按钮，导航栏中的购物车中显示的项目必须递增。如何在Angular4中实现此功能？以下是我的代码：

app.component.ts:
    if(this.storage.retrieve('cartList')==undefined){
    this.storage.store('cartList',this.cartData)

    }
    else{      
        this.cartData=this.storage.retrieve('cartList');
    }
if(this.cartData){
       this.length=this.cartData.length;
    }
else{
   this.length=0; 
}
productdetails.ts:
addToCart(data){
        this.addCart=true;
        this.addedOne=false;
        this.hideCart=true;
        this.continueShopping=false;
   this.cartItems.push(data)
   this.storage.store("cartList",this.cartItems);
   console.log(this.cartItems.length)
}

/*app.component.html:*/
 <a (click)="goToCart()" style="cursor:pointer">
                                    <h3>
                                        <div class="total">
                        
                                            (<span>{{this.length}}</span> items)</div>
                                        <img src="assets/images/bag.png" alt="" />
                                    </h3>
                                </a>

Answer 1

您可以使用@Output()和EventEmitter进行子组件和父组件之间的通信。

Child Component

import {Output,EventEmitter} from '@angular/core'
export class child{
   @Output() cartLength : EventEmitter<any> = new EventEmitter();
}

只要产品增加this.cartLength.emit(productLength);

，

就会发出长度

收听活动，

在您的父模板

中

<child (cartLength)=cartLengthChanged($event)><child>

在父cartLengthChanged()文件中定义.ts：

cartLengthChanged(event){ console.log(event);//event will be data to be passed from child to parent }

Answer 2

在你的孩子和父母身上，你做了几件事。

在您的子组件中：

@Output() updateCart: EventEmitter<any> = new EventEmitter<any>(); // before constructor

addToCart(data){
  //fill carts
  this.storage.store("cartList",this.cartItems);
  this.updateCart.emit(true); // trigger parent

在父html中：

<child (updateCart)="updateCart($event)"></child>

在父组件中：编辑

private updateCart(_boolean: any){
  this.cartData = this.storage.retrieve('cartList');
  this.length = this.cartData.length;
}

如何在Angular4中更改子组件中的值来更新父组件中的数组长度？

2 个答案: