Angular2로 NgZone에서 HTTP 요청을 실행하십시오.

Question

Angular2 Zone 내에서 프로파일보기를 업데이트하는 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) 
      ); 

    } 
} 

문제는, 프로필 페이지가로드 이 전에이 요청이 성취되어 있고 프로필 : 내 최고 수준의 프로파일 구성 요소에서 나는 현재 authHttp를 사용하여 하나의 간단한 HTTP 요청을하고 있어요 업데이트됩니다. 새로 고침을 클릭하면 처음에는 아무 일도 일어나지 않습니다. 이전 데이터가 프로필에로드되고 새 데이터가 이후에 발생하기 때문입니다. 두 번째로 새로 고침을 누르면 모든 것이 작동합니다. 마지막 요청에서로드 된 새 데이터 만 사용하기 때문입니다.

이 문제는 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 메서드 내부에서 데이터를 어떻게 든 변환하지 않으면 쉽게 처리 할 수 ​​있습니다.