使用事件发射器将数据从购物车传递到 Angular 的结帐页面答案

【问题标题】：Using Event Emitter to pass data from Cart to Checkout Page with Angular使用事件发射器将数据从购物车传递到 Angular 的结帐页面
【发布时间】：2020-07-19 21:00:38
【问题描述】：

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

这是我的 Cart.component.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>

谢谢

【问题讨论】：

标签： angular event-handling output angular-event-emitter

【解决方案1】：

首先，您的代码中似乎缺少某些内容，例如如何调用 valueChange、一个空的 input 等等。但不知何故，这是关于父子交互的常见问题。

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

checkout-page.component.html（假设app-cart是组件名）

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

checkout-page.component.ts

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

Angular Docs - Component Interaction

【讨论】：