使用 Angular2 在 NgZone 中执行 http 请求

Question

我想知道如何在 Angular2 区域内更新配置文件视图时执行 http 请求。在我的顶级配置文件组件中，我目前正在使用 authHttp:

执行一个简单的 http 请求

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 解决吗？我能否以某种方式将此请求包含到区域中，以便在它完成后重新评估组件树？

Answer 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 方法中转换数据，否则这可能会更容易。

使用 Angular2 在 NgZone 中执行 http 请求

Execute http request inside NgZone with Angular2

zone

zonejs

angular