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

    }
}

儿童

@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请求，这是有效的。但是一旦我收到请求，子视图就不会更新计数器。

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

我现在有一个hack是{child} setTimeout在调用updateCounter

之后更新计数器的子组件

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

}

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

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

1 个答案: