使用@Output和EventEmitter在Angular中的两个组件之间进行通信

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

车载组件：

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
}