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

【问题标题】：How can I update length of array in parent component from changing value in child component in Angular4?如何通过更改Angular4中子组件中的值来更新父组件中数组的长度？
【发布时间】：2018-03-21 15:27:04
【问题描述】：

我正在使用 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>

【问题讨论】：

有父子关系的你需要看even emitters

标签： angular typescript angular-components

【解决方案1】：

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

在您的子组件中：

@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>

并且在父组件中：EDIT

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

【讨论】：

在哪里可以显示父 html 中的长度？
@srujana 同一个地方。检查我的编辑。哦，顺便说一句，这是{{length}} 不是{{this.length}}
一般来说是一个“坏主意”有“重复”的项目。你有：this.storage、this.cartData 和 lenght。为什么不使用 {{CartData.length}} 或者更好，为什么不只使用 this.storage？
这是他的实现，不是我的，我只为他的问题提供解决方案。

【解决方案2】：

您可以使用@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 }

【讨论】：