如何通過更改Angular4中子組件中的值來更新父組件中數組的長度？

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);時，發出長度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

在孩子和父母中，您需要做幾件事。

在您的子組件中：

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