API까지 관찰 대기 모든 정보로드 Angular2

Question

로딩 구성 요소에서 작업하여 콘텐츠가 API에서 호출되고로드되는 사이에 친숙한 대기 시간을 갖습니다. 텍스트 만있는 경우에는 문제가 없지만 정보에 이미지 나 더 많은 정보가 있으면 컨텐츠가 완전히로드되기 전에로드 구성 요소가 사라집니다.

나는 Angular2의 라이프 사이클 후크를 살펴 보았지만 그 중 어떤 것도 내 요구 사항에 적합하다고 생각합니다.

주로 isLoading = true가 사라질 때 내 구성 요소가 이해합니다.

여기 내 방식대로 해 보았습니다.

ngOnInit() { 
     // Payload to call the API 
     var model: myPayload = { 
      AuthorId: this._authorid, 
      CountryId: this._countryid 

     } 
     // Api loading 
     Observable.forkJoin(
      this._service.getList(model) 
     ) 
      .subscribe(
      res => { 
       this.authorList = res[0]; 
      }, 
      null, 
      () => { 
       this.isLoading = false 
       } 
      ) 
} 

Answer 1

구성 요소가 Promise 또는 Observable A에 대한 기다리게 할 방법이 없습니다.

라우터는 가드를 사용하여 Observable이 완료 될 때까지 대기하도록 만들 수 있습니다.

간단한 해결 방법은보기의 가장 바깥 쪽 요소에 *ngIf="data"을 추가하는 것입니다.

Answer 2

다른 경우 canActivate 함수를 작성하는 방법입니다. 라우터에서

:

// all your imports go here 

const APP_ROUTES: Routes = [ 
    { path: '', component: HomePageComponent, canActivate: [WaitForApiLoad] } 
] 

export const AppRouter = RouterModule.forRoot(APP_ROUTES); 

가 새로운 서비스를 만들기

// all your imports go here 

@Injectable() 
export class WaitForApiLoad implements CanActivate 
{ 

    private dataFromApi: any; 

    canActivate(activatedRouteSnapshot: ActivatedRouteSnapshot, 
      routerStateSnapshot: RouterStateSnapshot): Observable<boolean> 
    { 

     return 
      this.myApiService 
       .getData() 
       .map(data => { 
        this.dataFromApi = data; 
        return true; 
       }); 
    } 

}