javascript - Angular 2 如何将带有参数的函数传递给子组件？

Question

当函数接受参数时，如何正确地将函数从父组件传递到子组件？

在 ngOnInit 中，如何限定一个函数的范围:

addToList(id) {
  this.store.dispatch(this.listActions.addToList(id));
}

ngOnInit，现在是错误的。

ngOnInit() {
  this.addToList = this.addToList.bind(this, id);
}

在我的父组件中，我有 addToCart(id) 函数。

我想将该函数传递给我的子组件，它有一个项目列表，并且在单击项目上的 ADD 按钮时，我想将 addToCart(item_id) 回调给父组件。

Answer 1

@Maarek 的回答很好，而且可能是“正确”的方法。我在这里展示的是一种更简单的方式，专门用于从子对象到父对象进行通信。

您在原帖中提出的是让Parent 向Child 发送一个回调方法，以便Child 可以在适当的时候用数据调用它。要完成此特定任务(从子级到父级的数据，关于子级中的某些操作)使用事件是合适的，使用子级内部的 EventEmitter。请参阅此 API 引用，其中有一个示例:https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html我制作的这个 Plunker 作为演示:https://embed.plnkr.co/T1wFqVOhMXgX6NRfTuiC/

在 child 中，你有这样的代码:

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'item',
  template: `
    <div class="item">
      <button type="button" (click)="addItem()">Add</button>
      <p>{{id}}
    </div>
  `
})
export class ItemComponent {
  @Input() id: string;
  //key line here: this emitter can be bound to by parent to get notifications
  @Output() add: EventEmitter<string> = new EventEmitter<string>();

  constructor() { }

  addItem() {
    //then when the button is clicked, emit events to the parent.
    this.add.emit(this.id);
  }
}

Parent 会像这样调用创建组件:

<item id="1" (add)="addToList($event)"></item>在哪里addToList()是 Parent 上的一个函数，它完成您的回调预期要做的工作。 $event 是从 child (id)传递过来的数据。