Warten Sie, bis Angular 2 das Modell geladen / aufgelöst hat, bevor Sie die Ansicht / Vorlage rendern

In Angular 1.x war UI-Router mein Hauptwerkzeug dafür. Wenn der Router ein Versprechen für "Auflösungs" -Werte zurückgibt, wartet er einfach, bis das Versprechen erfüllt ist, bevor er Anweisungen rendert.

Alternativ kann in Angular 1.x ein Nullobjekt eine Vorlage nicht zum Absturz bringen. Wenn mir also ein vorübergehend unvollständiges Rendern nichts ausmacht, kann ich es einfach $digestzum Rendern verwenden, nachdem promise.then()ein ursprünglich leeres Modellobjekt gefüllt wurde.

Wenn möglich, würde ich es vorziehen, mit dem Laden der Ansicht zu warten und die Routennavigation abzubrechen, wenn die Ressource nicht geladen werden kann. Dies erspart mir die Arbeit des "Navigierens". BEARBEITEN: Beachten Sie, dass dies speziell bedeutet, dass diese Frage eine Angular 2-Futures-kompatible oder Best-Practice-Methode dazu anfordert und den "Elvis-Operator" nach Möglichkeit meidet! Daher habe ich diese Antwort nicht ausgewählt.

Keine dieser beiden Methoden funktioniert jedoch in Angular 2.0. Sicherlich ist dafür eine Standardlösung geplant oder verfügbar. Weiß jemand was es ist?

@Component() {
    template: '{{cats.captchans.funniest}}'
}
export class CatsComponent {

    public cats: CatsModel;

    ngOnInit () {
        this._http.get('/api/v1/cats').subscribe(response => cats = response.json());
    }
}

Die folgende Frage kann dasselbe Problem widerspiegeln: Angular 2-Rendervorlage, nachdem das PROMISE mit Daten geladen wurde . Beachten Sie, dass die Frage keinen Code oder keine akzeptierte Antwort enthält.

Das Paket @angular/routerhat die ResolveEigenschaft für Routen. So können Sie Daten einfach auflösen, bevor Sie eine Routenansicht rendern.

Siehe: https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

Beispiel aus Dokumenten vom heutigen 28. August 2017:

class Backend {
  fetchTeam(id: string) {
    return 'someTeam';
  }
}

@Injectable()
class TeamResolver implements Resolve<Team> {
  constructor(private backend: Backend) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
    return this.backend.fetchTeam(route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})
class AppModule {}

Jetzt wird Ihre Route erst aktiviert, wenn die Daten aufgelöst und zurückgegeben wurden.

Zugriff auf aufgelöste Daten in Ihrer Komponente

Um zur Laufzeit von Ihrer Komponente aus auf die aufgelösten Daten zuzugreifen, gibt es zwei Methoden. Je nach Ihren Anforderungen können Sie also Folgendes verwenden:

1. route.snapshot.paramMap was eine Zeichenfolge zurückgibt, oder die
2. route.paramMapDies gibt ein Observable zurück, zu dem Sie können .subscribe().

Beispiel:

  // the no-observable method
  this.dataYouResolved= this.route.snapshot.paramMap.get('id');
  // console.debug(this.licenseNumber);

  // or the observable method
  this.route.paramMap
     .subscribe((params: ParamMap) => {
        // console.log(params);
        this.dataYouResolved= params.get('id');
        return params.get('dataYouResolved');
        // return null
     });
  console.debug(this.dataYouResolved);

Ich hoffe das hilft.

Versuchen Sie, {{model?.person.name}}dies sollte warten, bis das Modell nicht mehr vorhanden ist, undefinedund dann rendern.

Winkel 2 bezeichnet diese ?.Syntax als Elvis-Operator . Ein Verweis darauf in der Dokumentation ist schwer zu finden. Hier ist eine Kopie davon, falls sie geändert / verschoben werden:

Die Pfade Elvis Operator (?.) Und null

Der Angular-Operator „Elvis“ (?.) Ist eine fließende und bequeme Methode, um sich vor Null- und undefinierten Werten in Eigenschaftspfaden zu schützen. Hier ist es, um vor einem Fehler beim Rendern der Ansicht zu schützen, wenn der aktuelle Hero null ist.

The current hero's name is {{currentHero?.firstName}}

Lassen Sie uns das Problem und diese spezielle Lösung näher erläutern.

Was passiert, wenn die folgende datengebundene Titeleigenschaft null ist?

The title is {{ title }}

Die Ansicht wird weiterhin gerendert, der angezeigte Wert ist jedoch leer. wir sehen nur "Der Titel ist" mit nichts danach. Das ist vernünftiges Verhalten. Zumindest stürzt die App nicht ab.

Angenommen, der Vorlagenausdruck enthält einen Eigenschaftspfad wie in diesem nächsten Beispiel, in dem der Vorname eines Nullhelden angezeigt wird.

The null hero's name is {{nullHero.firstName}}

JavaScript löst einen Nullreferenzfehler aus, ebenso wie Angular:

TypeError: Cannot read property 'firstName' of null in [null]

Schlimmer noch, die gesamte Ansicht verschwindet.

Wir könnten behaupten, dass dies ein vernünftiges Verhalten ist, wenn wir glauben, dass die Heldeneigenschaft niemals null sein darf. Wenn es niemals null sein darf und dennoch null ist, haben wir einen Programmierfehler gemacht, der abgefangen und behoben werden sollte. Eine Ausnahme auszulösen ist das Richtige.

Andererseits können Nullwerte im Eigenschaftspfad von Zeit zu Zeit in Ordnung sein, insbesondere wenn wir wissen, dass die Daten irgendwann eintreffen werden.

Während wir auf Daten warten, sollte die Ansicht ohne Beanstandung gerendert werden und der Pfad der Null-Eigenschaft sollte genauso leer angezeigt werden wie die Eigenschaft title.

Leider stürzt unsere App ab, wenn der aktuelle Hero null ist.

Wir könnten dieses Problem mit NgIf umgehen

<!--No hero, div not displayed, no error --> <div *ngIf="nullHero">The null hero's name is {{nullHero.firstName}}</div>

Oder wir könnten versuchen, Teile des Eigenschaftspfads mit && zu verketten, da wir wissen, dass der Ausdruck ausfällt, wenn er auf die erste Null trifft.

The null hero's name is {{nullHero && nullHero.firstName}}

Diese Ansätze haben ihre Berechtigung, können jedoch umständlich sein, insbesondere wenn der Eigenschaftspfad lang ist. Stellen Sie sich vor, Sie schützen sich irgendwo in einem langen Eigenschaftspfad wie abcd vor einer Null

Der Angular-Operator „Elvis“ (?.) Ist eine flüssigere und bequemere Methode, um sich vor Nullen in Eigenschaftspfaden zu schützen. Der Ausdruck wird gelöscht, wenn er den ersten Nullwert erreicht. Das Display ist leer, aber die App läuft weiter und es gibt keine Fehler.

<!-- No hero, no problem! --> The null hero's name is {{nullHero?.firstName}}

Es funktioniert auch perfekt mit langen Eigenschaftspfaden:

a?.b?.c?.d

BEARBEITEN: Das eckige Team hat den @Resolve-Dekorateur veröffentlicht. Es muss noch geklärt werden, wie es funktioniert, aber bis dahin werde ich die Antwort eines anderen hier nehmen und Links zu anderen Quellen bereitstellen:

• StackOverflow: Verwenden von Resolve In Angular2-Routen
• StackOverflow: Gebrauchsmuster von Günter Zöchbauer
• Dokumentation auflösen
• Der Router-Patch auf GitHub
• RC4 ChangeLog
• RC4 Release Tweet

BEARBEITEN: Diese Antwort funktioniert nur für Angular 2 BETA. Der Router ist zum Zeitpunkt dieser Bearbeitung nicht für Angular 2 RC freigegeben. Ersetzen Sie stattdessen bei Verwendung von Angular 2 RC Verweise auf routerdurch router-deprecated, um den Beta-Router weiterhin zu verwenden.

Die Angular2-zukünftige Möglichkeit, dies zu implementieren, erfolgt über den @Resolve-Dekorator. Bis dahin ist das nächstgelegene Faksimile CanActivatelaut Brandon Roberts Component Decorator. Siehe https://github.com/angular/angular/issues/6611

Beta 0 unterstützt zwar nicht die Bereitstellung aufgelöster Werte für die Komponente, ist jedoch geplant, und es gibt auch eine hier beschriebene Problemumgehung : Verwenden von Resolve In Angular2-Routen

Ein Beta 1-Beispiel finden Sie hier: http://run.plnkr.co/BAqA98lphi4rQZAd/#/resolved . Es wird eine sehr ähnliche Problemumgehung verwendet, das RouteDataObjekt wird jedoch etwas genauer verwendet als RouteParams.

@CanActivate((to) => {
    return new Promise((resolve) => {
        to.routeData.data.user = { name: 'John' }

Beachten Sie außerdem, dass es auch eine Beispielumgehung für den Zugriff auf "aufgelöste" Werte für verschachtelte / übergeordnete Routen und andere Funktionen gibt, die Sie erwarten, wenn Sie den 1.x UI-Router verwendet haben.

Beachten Sie, dass Sie alle Dienste, die Sie dazu benötigen, auch manuell einfügen müssen, da die Angular Injector-Hierarchie derzeit im CanActivate-Dekorator nicht verfügbar ist. Durch einfaches Importieren eines Injektors wird eine neue Injektorinstanz ohne Zugriff auf die Anbieter von erstellt bootstrap(). Daher möchten Sie wahrscheinlich eine anwendungsweite Kopie des Bootstrap-Injektors speichern. Brandons zweiter Plunk-Link auf dieser Seite ist ein guter Ausgangspunkt: https://github.com/angular/angular/issues/4112

Stellen Sie mit dem Beobachter einen lokalen Wert ein

... vergessen Sie auch nicht, den Wert mit Dummy-Daten zu initialisieren, um uninitializedFehler zu vermeiden .

export class ModelService {
    constructor() {
      this.mode = new Model();

      this._http.get('/api/v1/cats')
      .map(res => res.json())
      .subscribe(
        json => {
          this.model = new Model(json);
        },
        error => console.log(error);
      );
    }
}

Dies setzt voraus, dass Model ein Datenmodell ist, das die Struktur Ihrer Daten darstellt.

Ein Modell ohne Parameter sollte eine neue Instanz erstellen, bei der alle Werte initialisiert (aber leer) sind. Auf diese Weise wird beim Rendern der Vorlage vor dem Empfang der Daten kein Fehler ausgegeben.

Wenn Sie die Daten beibehalten möchten, um unnötige http-Anforderungen zu vermeiden, sollten Sie diese im Idealfall in ein Objekt einfügen, das über einen eigenen Beobachter verfügt, den Sie abonnieren können.

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

<div *ngIf="vendorServicePricing && quantityPricing && service">
 ...Your page...
</div

Erst wenn: vendorServicePricing, quantityPricingund servicegeladen werden , die Seite gerendert wird.

Implementieren Sie das routerOnActivatein Ihrem @Componentund geben Sie Ihr Versprechen zurück:

https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

BEARBEITEN: Dies funktioniert explizit NICHT, obwohl die aktuelle Dokumentation zu diesem Thema etwas schwer zu interpretieren sein kann. Weitere Informationen finden Sie in Brandons erstem Kommentar hier: https://github.com/angular/angular/issues/6611

BEARBEITEN: Die zugehörigen Informationen auf der ansonsten normalerweise genauen Auth0-Site sind nicht korrekt: https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in- Tiefe/

BEARBEITEN: Das eckige Team plant zu diesem Zweck einen @Resolve-Dekorateur.