角2子コンポーネントにparamsの関数を渡す方法は？

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

ここには詳細はたくさんありませんが、私が収集しているものから、コンポーネント間で共有されるデータオブジェクトを処理するための注入可能なサービス（ここでは、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){}（と、それを必要とする任意の他のコンポーネント）の両方のコンストラクタにこのサービスを注入します。次に、子はリストにサブスクライブすることができます：get List() { return this._storeService.StoreList }、親はadd関数を呼び出してリストに追加できます。これをテンプレートに* ngForとして追加するときは、値を非同期パイプに渡すように注意してください。 *ngFor="List | async"またはあなたはあなたが間違いをしている理由を理解しようとしてあなたの髪を引き裂く可能性があります。 （あなたが完全に角度2に慣れまで、私が最初に不変回避勧めかもしれませんが）

この記事では、同様にこれで私をたくさん助けた：Maarekの答え@http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

Answer 2

は良いものです、そしてありますおそらく、それを行うための '正しい'方法。私がここで提示しているのは、特に子供から親に伝達する簡単な手段です。

元の投稿で提案したのは、親がコールバックメソッドを子に送信することでした。そのため、子は適切なときにデータで呼び出すことができます。これを達成するには、イベントを使用して、Child内部からのEventEmitterを使用して、特定のタスク（Child内のいくつかのアクションでChildからParentへのデータ）を実行することが適切です。 https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.htmlと私はデモとして作られたこのPlunker：例あり、このAPIリファレンスを参照してください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); 
    } 
} 

親がこのようなコンポーネントを作成して呼び出します：

addToList()は、コールバックが意図した作業を行う親の関数です。 $イベントは、子（ID）から渡されたデータです。