Ionic/Angular: State oder Query Params?

Seit der Einführung des Angular Routings hat sich was die Navigation in Ionic angeht einiges geändert. Die Methoden push() und pop() des NavControllers sind deprecated, jedoch wurde der NavController um einige Methoden erweitert. Warum wir unbedingt die hauseigenen Methoden von Ionic n und nicht die von Angular nehmen sollten und was der Unterschied zwischen State und queryParams ist erfährst du in diesem Artikel.

Vorweg: Warum also NavController und nicht Angular Routing?
Seit Ionic 4 bzw. Angular 7 besteht ein neues Routing Feature welches die konventionellen Funktionen des NavControllers ablöst. Das Routing mit Angular sieht wie folgt aus:

import { Router, NavigationExtras } from '@angular/router‘;

const navigationExtras: NavigationExtras = {
    queryParams: {
        user: this.user
    }
};
this.router.navigate(['details'], navigationExtras); // Angular Router

Warum wir stattdessen aber auf die neuen Methoden navigateForward(), navigateBack() und navigateRoot() des NavContollers von Ionic zurückgreifen sollten hat folgenden Vorteil: Der NavController bildet einen Wrapper rund um die Methoden des Angular Router, welche uns explizit auf Ionic abgestimmte Zusatzfunktionen bieten. So können wir zum Beispiel PageTransitions (vor und zurück) von iOS und Android anwenden, was der Router alleine nicht kann.

Angular ist ein Framework um Webanwendungen zu erstellen, Ionic bringt zusätzliche Funktionen welche es uns ermöglicht alle Eigenschaften von Mobilen Plattformen bzw. Endgeräten perfekt zu imitieren.

import { NavigationExtras } from '@angular/router‘;
import { NavController } from '@ionic/angular';

const navigationExtras: NavigationExtras = {
    queryParams: {
        user: this.user
    }
};
this.navCtrl.navigateForward(['details'], navigationExtras); // Ionic NavController

Wann nehme ich State und wann Query Params?
Nachdem geklärt wurde warum unbedingt der NavController zum Navigieren zwischen den verschiednen Pages genutzt werden sollte, wird es nun Zeit einen weiteren wichtigen Punkt zu besprechen: Wann nehme ich State und wann Query Params? Parameter gibt es in jeder Programmiersprache bzw. Framework. Auch du hast bestimmt schon mit ihnen gearbeitet. Wenn nicht, kein Problem! 

Zuerst widmen wir uns der Thematik wie Parameter grundlegend funktionieren. Parameter (in unserem Fall URL Parameter) sind Informationen die von einer Page an eine andere übergeben werden sollen. So müssen wir z.B. in der Startseite gewisse Informationen (JSON) nur einmal laden, können diese in einer komprimierten Listenansicht darstellen und bei einem Klick auf ein Listenelement die entsprechenden Daten an eine weitere Seite übergeben welche diese in vollem Umfang darstellt. URL Parameter werden in Ionic wie folgt angewendet:

const navigationExtras: NavigationExtras = {
    queryParams: {
        product: product
    }
};

Dies führt zu folgendem Ergebnis in unserer URL Struktur:

Wie man sieht kann dies schnell zu einer undurchsichtigen URL führt welche auf Grund ihrer Länge auch zu Fehlern führen kann, da eine URL maximal 2000 Zeichen betragen darf.

Vorteile von URL Parametern

• Hilfreich beim Entwickelnd da bei einem Reload alle Parameter erhalten bleiben.
• Nützlich bei Web Apps welche es vorsehen dass Links geteilt und verschickt werden sollen.

Nachteilevon URL Parametern

• URLs können zu lang und unübersichtlich werden.

---

Um nun Daten per State zu übergeben müssen wir nur eine Kleinigkeit ändern:

const navigationExtras: NavigationExtras = {
    state: {
        product: product
    }
};

Um die Daten auf der nächsten Seite wieder abzufangen nutzen wir folgenden Code:

import { ActivatedRoute, Router } from '@angular/router‘;

constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(() => {
        if (this.router.getCurrentNavigation().extras.state) {
            this.product = this.router.getCurrentNavigation().extras.state.product;
        }
    });
}

Vorteile von States

• Gut geeignet um große JSON Objekte zu übergeben

Nachteilevon States

• Wie der name State schon aussagt, handelt es sich hierbei um einen Zustand, welcher aber nur von temporärer Begebenheit ist. Das heißt wenn eine Page neu geladen wird, gehen alle zuvor übergebenen Informationen verloren.