Обмен данными между двумя компонентами в Angular с помощью @Output и EventEmitter

Question

Добрый день, я новичок в Angular, и я работаю над корзиной электронной коммерции и страницей оформления заказа, используя Angular 9. Я хотел бы передать / сообщить количество каждого продукта, введенного во входной тег компонента корзины на страницу оформления заказа. Я пробовал другой метод, но я застрял, и метод @Output, похоже, не работает. Ниже приведены мои коды Cart.Component.ts

 import { Component, OnInit,EventEmitter, Output,Input} from '@angular/core';
 @Input() quantities = [];
@Output() quantityChange = new EventEmitter();

 changeQuantity(quantities){
  this.quantityChange.emit(quantities);
 }

checkout() {
   
    this.quantityChange.emit ();
}
    

Checkout.component. html

Qty: {{quantities}}
    <app-cart (quantityChange)="ChangeQuantity($event)"></app-cart>

Заранее спасибо

Answer 1

В Cart.Component.ts:

checkout() {
    this.quantityChange.emit (quantities);
}

В Checkout.component. html

Qty: {{quantities}}
    <app-cart (quantityChange)="ChangeQuantity($event)"></app-cart>

В Checkout.component.ts

quantities = ''; // init above    
changeQuantity(e) {
      this.quantities = e
     }