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

Question

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

在 ngOnInit 中，如何定义函数的范围：

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

ngOnInit，现在是错误的。

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

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

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

Answer 1

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

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

在孩子中，你有这样的代码：

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 是从孩子（id）传递过来的数据。

Answer 2

这里没有太多细节，但从我收集的信息来看，我认为您需要的是一个可注入服务（此处演示：https://angular.io/docs/ts/latest/tutorial/toh-pt4.html）来处理组件之间共享的数据对象。与其在这里输入一堆代码（最好在教程的那个页面显示），我将描述我认为你正在尝试做什么以及我将如何去做。

整个商店数据模型可以通过一个服务（store.service.ts 可能）来处理。这将使您的 CRUD 函数针对商店模型的不同属性公开。您在此处添加的列表应该有一个公共 getter，它返回服务中列表的可观察对象，以及一个用于从列表中添加和删除的公共函数。像这样的：

@Injectable
export class StoreService {
  private _storeList:BehaviorSubject<Array<any>> = new BehaviorSubject<Array<any>>([]);

  /*I'm sure the store has other properties, set them up here. I'd suggest
    breaking any arrays out of the general object (unless you want to use
    pipes which are awesome but keeping it simple here) but if the store has
    a lot of general properties (name, address, whatever) they can be stored 
    in a single BehaviorSubject of type any.
  */

  constructor(){}

  get StoreList() { return this._storeList.asObservable() }

  public addToList(id) {
      let curVal = this._storeList.getValue();
      curVal.push(id);
      this._storeList.next(curVal);
  }

}

然后，您可以将此服务注入到父子 constructor(private _storeService:StoreService){}（以及任何其他需要它的组件）的构造函数中。然后孩子可以订阅列表：get List() { return this._storeService.StoreList }，父母可以调用 add 函数添加到列表中。需要注意的一点是，当您将它作为 *ngFor 添加到模板时，请确保通过异步管道传递值。 *ngFor="List | async" 或者你可能会想弄清楚为什么会出错。

这篇文章在这方面对我也有很大帮助（尽管我可能建议一开始避免使用不可变，直到您完全熟悉 Angular 2）：http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/