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

Question

我在 Angular4.I 的电子商务网站上工作，需要在 app.component 中的导航栏中显示购物车中存在的一些项目，并在我的产品详细信息页面中添加到购物车选项是 present.When 用户点击添加到购物车按钮，导航栏中购物车中显示的许多项目必须是 incremented.How 我可以在 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>

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

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

Answer 2

在你的 child 和 parent 中你做了一些事情。

在您的 child 组件中：

@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

在parent html:

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

并且在 parent 组件中：EDIT

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

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

How can I update length of array in parent component from changing value in child component in Angular4?

typescript

angular-components

angular