使用Event Emitter将数据从Cart传递到Angular的Checkout页面

Question

我目前正在处理购物车，我想将购物车页面上键入的数量和其他数据传递到结账页面。我尝试了不同的方法，但我无法得到它。

这是我的购物车组件.ts

export class CartComponent implements OnInit {
@Input()
@Output() quantityChange = new EventEmitter();

constructor(
private data: DataService,
private rest: RestApiService,
private router: Router,
) {}

async ngOnInit() {
this.cartItems.forEach(data => {
this.quantities.push(1);
});
}
valueChanged(){
this.quantities = this.quantities
this.quantityChange.emit(this.quantities)
}

和我的cart.component.html

<div class="col-1 mt-5 mt-md-0 p-0 induc">
<input type="number" class="form-control text-left boy" 
[(ngModel)]="quantities[i]">
</div>            
...
<h5 class="text-right">Total:
<span class="ml-1 font-weight-bold text-danger"> ₦ {{ cartTotal}}
</span>
</h5>

谢谢

Answer 1

首先，代码中似乎缺少一些东西，比如如何调用valueChange、一个空的input等。但这在某种程度上是父子交互的常见问题。

通过在子级中定义输出quantityChange，您已经建立了一半的交互。现在您只需要在父级中捕获该输出即可。像这样的东西应该行得通，

checkout page.component.html(假设app-cart是组件名称(

...
<app-cart (quantityChange)="cartQuantityChange($event)"></app-cart>
...

结账页面组件.ts

export class CheckoutPage {
...
cartQuantityChange(quantities: number[]) {
// do something with quantities
}
...
}

Angular Docs-组件交互