해결 기능은 함수가 호출 ngOnInit 구성 요소 전에 구성 요소 데이터가 해결되지 않는

Question

나는 이런 식으로 뭔가있는 URL이 있습니다

base_path/some_path?elementId=33203

기본적으로, 사용자가 일반적으로 할 수있는과를 붙여 넣어이 경로로 이동을 위의 링크를 클릭하십시오. I 은 구성 요소 앞에이 구성 요소에 대한 데이터를로드해야하므로 각도 라우팅 자습서, 특히 내가 보유한 정확한 quandry를 달성하기위한 리졸버 서비스에 대한 정보를 읽기 시작했습니다. 이 해결 클래스는 지금처럼 app.routing.module.ts에 추가됩니다

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SomeObject> { 
    let loanId = route.queryParams['elementId']; 

    if (isNil(loanId)) { 
     return null; 
    } 
    return this.service.getElementById(elementId) 
     .subscribe(response => { 
    //response is JSON 
      return Observable.of(response); 
     } 
     else { 
      return null; 
     } 
     }); 
    } 

:

{ path: 'base_path/some_path', component: SomeComponent, 
resolve : { 
    someObject: SomeObjectResolver 
} 

}

그리고 해당 변경 사항을 같은 그래서 나는 리졸버 서비스를 생성 내 구성 요소 .ts 파일에서 :

ngOnInit() { 
    this.route.data.subscribe((data: { someObject: SomeObject}) => { 

    }); 

} 

I 해결 프로그램에서 디버그 중단 점을 설정합니다. 및 구성 요소 파일. URI : base_path/some_path?elementId=33203을 방문하면 먼저 리졸버에 도달하지만 리졸버가 서버 호출 데이터에 대한 ajax 호출을 호출하는 서비스를 호출하기 때문에 구성 요소로 진행하고 ngOnInit 함수를 호출합니다. (데이터 : {someObject : SomeObject})에서 구독 기능을 호출하려고 시도합니다.

그러나 someObject는 아직 사용할 수 없으므로 오류가 발생하고 리디렉션됩니다.

무엇이 누락 되었습니까? resolve 함수는 호출되기 전에 구성 요소의 데이터를 명시 적으로로드해야합니까?

Answer 1

당신은 당신이에 가입 한 후 돌려 줄 필요가없는, 피 감시를 반환해야 새로운 관찰

당신은 작동하는 실제 * * 관찰을 반환해야

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SomeObject> { 
    let loanId = route.queryParams['elementId']; 

    if (isNil(loanId)) { 
    return Observable.of(null); 
    } 
    return this.service.getElementById(elementId); 
}