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

Question

I am working on e-commerce site in Angular4.I need to show a number of items present in a cart in nav bar which is written in app.component and in my product details page add to cart option is present.When a user clicks on add to cart button, a number of items showing in a cart in navbar have to be incremented.How can I implement this in Angular4?Below is my code:

 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

You can use @Output() and EventEmitter for communication between child and parent component.

Child Component

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

emit the length whenever the products increase by this.cartLength.emit(productLength);

To Listen to the event,

in your parent Template,

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

Define the cartLengthChanged() in parent .ts file :

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

Answer 2

In your child and parent you do a couple of things.

In your child component:

@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

In the parent html:

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

And in the parent component: EDIT

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