Angular2: Wie lade ich Daten, bevor ich die Komponente rendere?

Ich versuche, ein Ereignis aus meiner API zu laden, bevor die Komponente gerendert wird. Derzeit verwende ich meinen API-Dienst, den ich über die ngOnInit-Funktion der Komponente aufrufe.

Meine EventRegisterKomponente:

import {Component, OnInit, ElementRef} from "angular2/core";
import {ApiService} from "../../services/api.service";
import {EventModel} from '../../models/EventModel';
import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams, RouterLink} from 'angular2/router';
import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from 'angular2/common';

@Component({
    selector: "register",
    templateUrl: "/events/register"
    // provider array is added in parent component
})

export class EventRegister implements OnInit {
    eventId: string;
    ev: EventModel;

    constructor(private _apiService: ApiService, 
                        params: RouteParams) {
        this.eventId = params.get('id');
    }

    fetchEvent(): void {
        this._apiService.get.event(this.eventId).then(event => {
            this.ev = event;
            console.log(event); // Has a value
            console.log(this.ev); // Has a value
        });
    }

    ngOnInit() {
        this.fetchEvent();
        console.log(this.ev); // Has NO value
    }
}

Meine EventRegisterVorlage

<register>
    Hi this sentence is always visible, even if `ev property` is not loaded yet    
    <div *ngIf="ev">
        I should be visible as soon the `ev property` is loaded. Currently I am never shown.
        <span>{{event.id }}</span>
    </div>
</register>

Mein API-Service

import "rxjs/Rx"
import {Http} from "angular2/http";
import {Injectable} from "angular2/core";
import {EventModel} from '../models/EventModel';

@Injectable()
export class ApiService {
    constructor(private http: Http) { }
    get = {
        event: (eventId: string): Promise<EventModel> => {
            return this.http.get("api/events/" + eventId).map(response => {
                return response.json(); // Has a value
            }).toPromise();
        }     
    }     
}

Die Komponente wird gerendert, bevor der API-Aufruf in der ngOnInitFunktion das Abrufen der Daten abgeschlossen hat. Daher wird die Ereignis-ID in meiner Ansichtsvorlage nie angezeigt. Es sieht also so aus, als wäre dies ein ASYNC-Problem. Ich habe erwartet, dass die Bindung der ev( EventRegisterKomponente) einige Arbeit leistet, nachdem die evEigenschaft festgelegt wurde. Leider wird das mit divgekennzeichnete nicht angezeigt, *ngIf="ev"wenn die Eigenschaft festgelegt wird.

Frage: Benutze ich einen guten Ansatz? Wenn nicht; Was ist der beste Weg, um Daten zu laden, bevor die Komponente mit dem Rendern beginnt?

HINWEIS: Der ngOnInitAnsatz wird in diesem Angular2-Lernprogramm verwendet .

BEARBEITEN:

Zwei mögliche Lösungen. Zuerst musste fetchEventder API-Dienst in der ngOnInitFunktion verworfen und einfach verwendet werden.

ngOnInit() {
    this._apiService.get.event(this.eventId).then(event => this.ev = event);
}

Zweite Lösung. Wie die gegebene Antwort.

fetchEvent(): Promise<EventModel> {
    return this._apiService.get.event(this.eventId);
}

ngOnInit() {
    this.fetchEvent().then(event => this.ev = event);
}

aktualisieren

• Wenn Sie den Router verwenden, können Sie Lifecycle-Hooks oder Resolver verwenden, um die Navigation zu verzögern, bis die Daten eintreffen. https://angular.io/guide/router#milestone-5-route-guards

• Das Laden von Daten vor dem ersten Rendern der Root-Komponente APP_INITIALIZERkann verwendet werden. So übergeben Sie vom Backend gerenderte Parameter an die Angular2-Bootstrap-Methode

Original

Wenn danach console.log(this.ev)ausgeführt wird this.fetchEvent();, bedeutet dies nicht, dass der fetchEvent()Anruf abgeschlossen ist, sondern nur, dass er geplant ist. Wenn console.log(this.ev)ausgeführt, wird der Aufruf des Servers nicht einmal getätigt und hat natürlich noch keinen Wert zurückgegeben.

Ändern Sie fetchEvent(), um a zurückzugebenPromise

 fetchEvent(){
    return  this._apiService.get.event(this.eventId).then(event => {
        this.ev = event;
        console.log(event); // Has a value
        console.log(this.ev); // Has a value
    });
 }

Ändern Sie ngOnInit(), um auf den PromiseAbschluss zu warten

ngOnInit() {
    this.fetchEvent().then(() =>
    console.log(this.ev)); // Now has value;
}

Dies wird Ihnen tatsächlich nicht viel für Ihren Anwendungsfall kaufen.

Mein Vorschlag: Wickeln Sie Ihre gesamte Vorlage in eine <div *ngIf="isDataAvailable"> (template content) </div>

und in ngOnInit()

isDataAvailable:boolean = false;

ngOnInit() {
    this.fetchEvent().then(() =>
    this.isDataAvailable = true); // Now has value;
}

Eine nette Lösung, die ich gefunden habe, besteht darin, auf der Benutzeroberfläche Folgendes zu tun:

<div *ngIf="isDataLoaded">
 ...Your page...
</div

Nur wenn: isDataLoaded true ist, wird die Seite gerendert.

Sie können Pre-Fetch - Daten unter Verwendung von Resolver in Angular2 + verarbeiten Resolver Ihre Daten vor Ihrer Komponente vollständig geladen werden.

In vielen Fällen möchten Sie Ihre Komponente nur laden, wenn bestimmte Ereignisse auftreten. Navigieren Sie beispielsweise nur dann zum Dashboard, wenn die Person bereits angemeldet ist. In diesem Fall sind Resolver sehr praktisch.

Schauen Sie sich das einfache Diagramm an, das ich für Sie erstellt habe, um zu erfahren, wie Sie mit dem Resolver die Daten an Ihre Komponente senden können.

Das Anwenden von Resolver auf Ihren Code ist ziemlich einfach. Ich habe die Snippets erstellt, damit Sie sehen können, wie der Resolver erstellt werden kann:

import { Injectable } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { MyData, MyService } from './my.service';

@Injectable()
export class MyResolver implements Resolve<MyData> {
  constructor(private ms: MyService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<MyData> {
    let id = route.params['id'];

    return this.ms.getId(id).then(data => {
      if (data) {
        return data;
      } else {
        this.router.navigate(['/login']);
        return;
      }
    });
  }
}

und im Modul :

import { MyResolver } from './my-resolver.service';

@NgModule({
  imports: [
    RouterModule.forChild(myRoutes)
  ],
  exports: [
    RouterModule
  ],
  providers: [
    MyResolver
  ]
})
export class MyModule { }

und Sie können in Ihrer Komponente wie folgt darauf zugreifen :

/////
 ngOnInit() {
    this.route.data
      .subscribe((data: { mydata: myData }) => {
        this.id = data.mydata.id;
      });
  }
/////

Und in der Route so etwas (normalerweise in der Datei app.routing.ts):

////
{path: 'yourpath/:id', component: YourComponent, resolve: { myData: MyResolver}}
////