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觀察的數據服務，陷阱對避免/