Warten auf beobachtbare bis API Laden Sie alle Informationen Angular2

Question

Ich habe in einer Ladekomponente gearbeitet, um eine freundliche Wartezeit zwischen dem Inhalt aufgerufen und geladen von API zu machen. Es gibt kein Problem, wenn es sich nur um Text handelt, aber wenn die Information Bilder oder mehr Informationen enthält, verschwindet die Ladekomponente, bevor der Inhalt vollständig geladen ist.

Ich habe einen Blick auf die Lebenszyklus-Hooks von Angular2 geworfen, aber jeder von ihnen sieht für meine Anforderungen wie passend aus.

Hauptsächlich meine Komponente verstehen, wenn das IsLoading = True verschwinden muss.

Hier ist mein Weg, ich habe versucht, es zu tun.

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

Es gibt keine Möglichkeit, Komponenten für eine Promise oder Observable warten zu machen.

Der Router kann mit der CanActivate Schutzvorrichtung auf Observable warten.

Eine einfache Problemumgehung ist, nur *ngIf="data" auf dem äußersten Element in der Ansicht hinzuzufügen.

Answer 2

Für andere schreiben Sie so Ihre canActivate-Funktion.

In Ihrem Router:

// all your imports go here 

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

export const AppRouter = RouterModule.forRoot(APP_ROUTES); 

einen neuen Dienst erstellen WaitForApiLoad

// 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; 
       }); 
    } 

}