子供が親を呼び出すと子コンポーネントの親変数を更新する方法httpリクエストを持つ

Question

変更された@Inputは、親コンポーネントのhttpリクエストで更新された後、子コンポーネントで表示されないようです。

これは一例です：

親だから、

import { ChildComp } from './child.component'; 

@Component({ 
    template: <child [counter]="a" [updateCounter]="updateCounter"></child>, 
    directives: [ChildComp] 
}) 

export class ParentComponent { 
    public a = 1; 
    public CallBack:Function; 

    constructor(private _http:Http) {} 

    public ngOnInit() { 
     this.CallBack = this.updateCounter.bind(this); 
    } 

    public updateCounter() { 
     this._http.get('/newcounter/').subscribe(
      data => { 
       // update counter 
       this.a = JSON.parse(data['_body']); 
      }, 
      error => {}, 
      () => console.log('updated counter') 
     ); 

    } 
} 

子供

@Component({ 
    selector: 'child', 
    template: ` 
     <button class="btn btn-default" (click)="updateCounter()"></button> 
     <p>counter: {{ counter }}</p> 
    `, 
    inputs: ["counter", "updateCounter"] 
}) 

export class ChildComponent { 
    public counter; 
    public updateCounter:Function; 

    constructor() {} 
} 

httpリクエストがない場合、これは動作します。しかし、私は要求があると、子ビューはカウンタを更新しません。

アイデア？私は何が欠けていますか？

public updateCounter() { 
    let that = this; 
    this._http.get('/newcounter/').subscribe(
     data => { 
      // update counter 
      that.a = JSON.parse(data['_body']); 
     }, 
     error => {}, 
     () => console.log('updated counter') 
    ); 

} 

でthisを使用した：私は今持っている

一つのハックは、このようなあなたの親コンポーネントのupdateCounter機能を改正updateCounter

Answer 1

に呼び出した後、カウンタ500ミリ秒を更新するために、子コンポーネントにsetTimeoutにあります約束はあなたのクラスをもう参照しません。だから、thisへの参照を別の変数に保持し、代わりにその変数を使用する必要があります。

Answer 2

updateCounter関数が子コンポーネントから呼び出され、そのコンテキストthisがChildComponentのインスタンスを参照しています。

は、以下のことを試してみてください。

export class ParentComponent { 
    ... 
    public ngOnInit() { 
    this.updateCounter = this.updateCounter.bind(this); 
    }