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的答案是一个很好的答案，而且可能是这样做的“正确”方法。 我在这里介绍的是一种更简单的方式，专门用于从孩子到父母的交流。

您在原始帖子中建议的是让父级向子级发送回调方法，以便子级可以在适当的时候使用数据进行调用。 要使用事件来完成此特定任务（从子对象到父对象的数据，涉及子对象中的某些操作），可以使用子对象内部的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);
  }
}

父级将调用create组件，如下所示：

<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函数。 您要添加到此处的列表应该有一个公共获取器，该获取器返回服务中列表的可观察值，以及一个用于在列表中添加和删除的公共函数。 像这样：

@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){} （以及需要它的任何其他组件constructor(private _storeService:StoreService){} 。 然后，子级可以订阅列表： get List() { return this._storeService.StoreList } ，父级可以调用add函数将其添加到列表中。 需要注意的一件事，当将它作为* ngFor添加到模板中时，请确保将值通过异步管道传递。 *ngFor="List | async"否则您可能会想弄清楚为什么会出错，因此可能会*ngFor="List | async"您的头发。

这篇文章也为我提供了很多帮助（尽管我可能建议您一开始就避免不可变，直到您完全熟悉Angular 2为止）： http : //blog.angular-university.io/how-to-build-angular2-应用-使用- rxjs观察的数据服务，陷阱对避免/