0

我想知道如何在 Angular2 区域内更新配置文件视图时执行 http 请求。在我的顶级配置文件组件中，我目前正在使用以下方法执行一个简单的 http 请求authHttp：

export class ProfileComponent implements OnInit {
    constructor(
        private auth: Auth,
        private authHttp: AuthHttp) {}

    ngOnInit() {
        // update profile information
        let headers: any = {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        };

        this.authHttp
            .get('https://' + myConfig.domain + '/api/v2/users/' + this.auth.userProfile.user_id, {headers: headers})
            .map(response => response.json())
            .subscribe(
                response => {
                    this.auth.userProfile = response;
                    localStorage.setItem('profile', JSON.stringify(response));
                },
                error => console.log(error.json().message)
            );

    }
}

问题在于，由于此请求是异步的，因此在满足此请求并更新配置文件之前加载配置文件页面。发生的情况是我第一次单击刷新时没有任何反应，因为旧数据加载到配置文件中，而新数据加载后。然后我第二次点击刷新一切正常，因为它只是使用从最后一个请求加载的新数据。

这个问题可以使用解决NgZone吗？我可以以某种方式将此请求包含到区域中，以便在完成后重新评估组件树吗？

4

1 回答 1

1

根据您的评论，我认为这与区域无关。当您的 @Input 属性更改时，您需要更新您的辅助组件。

export class SecondaryComponent {

    private _myProperty: any;
    @Input()
    set myProperty(val: any) {
        this._myProperty = val;
        this.update();
    }

    update() { //instead of ngOnInit just use this
        //do stuff with _myProperty now
    }

}

但是，为什么不能只绑定到该辅助组件内的 auth.userProfile 字段？除非您在辅助组件 ngOnInit 方法中以某种方式转换数据，否则这可能会更容易。

于 2017-01-16T19:28:15.573 回答