Wie Eltern Variable in geordnete Komponente zu aktualisieren, nachdem Kind Eltern-Funktion, die HTTP-Anforderung

Question

hat angerufen hat anscheinend kann ich nicht geändert @Input in der untergeordneten Komponente zu sehen, nachdem es in den Eltern http Anfrage aktualisiert wurde. Diese

ist ein Beispiel:

Eltern

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') 
     ); 

    } 
} 

Kind

@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() {} 
} 

Also, das funktioniert, wenn es nicht HTTP-Anforderung ist. Aber sobald ich die Anfrage habe, wird die untergeordnete Ansicht den Zähler nicht aktualisieren.

Irgendwelche Ideen? Was vermisse ich?

Ein Hack, den ich jetzt habe, ist zu setTimeout auf untergeordnete Komponente die Zähler 500 ms nach dem Aufruf von updateCounter

Answer 1

Änderung der updateCounter Funktion der übergeordneten Komponente wie folgt zu aktualisieren:

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

} 

Mit this in Das Versprechen bezieht sich nicht mehr auf deine Klasse. Sie müssen also eine Referenz auf this in einer anderen Variablen behalten und diese stattdessen verwenden.

Answer 2

Ihre updateCounter-Funktion wird von der untergeordneten Komponente aufgerufen, und ihr Kontext this bezieht sich auf die Instanz ChildComponent.

Versuchen Sie Folgendes:

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