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可以在适当时使用数据调用它。使用事件来完成此特定任务（从Child到Parent的某些操作的数据）是合适的，使用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，它返回服务中列表的observable以及用于在列表中添加和删除的公共函数。像这样：

@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/

Angular 2如何将params函数传递给子组件？

2 个答案: