javascript - 子组件调用具有http请求的父函数后如何更新子组件中父组件的变量

Question

在父级 http 请求中更新后，我似乎无法在子组件中看到更改后的 @Input。

这是一个例子:

父级

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

    }
}

child

@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 请求，这将起作用。但是一旦我收到请求， subview 将不会更新计数器。

有什么想法吗？我错过了什么？

我现在的一个技巧是在子组件上设置setTimeout，以便在调用updateCounter后500毫秒更新计数器

Answer 1

修改父组件的 updateCounter 函数，如下所示:

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

}

在 promise 中使用 this 不再引用您的类。因此，您需要在另一个变量中保留对 this 的引用并使用该变量。