Subscription zu Query- und Route Parametern in Angular/RxJS

Mär 30 (23:03)

Ich würde gerne sowohl die Query als auch die Route Parameter in Angular gleichzeitig auslesen. Man kann zwar einzeln zu Query oder Route Parametern eine Subscription setzen, allerdings laufen die Callbacks asynchron und zB. in der Subscription auf Query-Parameter sind die Daten aus Route-Parameter noch nich geladen:

this.route.params.subscribe(params => {
    const { id } = params;
    this.foobar = this.loadFoobar(id);
});

this.route.queryParams.subscribe(query => {
    const { dingDong } = query;
    // this.foobar ist undefined !!!
    this.foobar.setDingDong(dingDong);
});

Ich würde gerne sowohl auf Route als auch auf Query-Parameter eine Subscription setzen. Wie geht das mit Angular bzw. RxJS?

Angular_Legend Mai 26 (12:19)

Das ist sicherlich nicht die beste und eleganteste Lösung: Man kann in dem Callback für die Query-Parameter über setTimeout einfach abwarten, bis die Params gesetzt sind bzw. das "foobar" Objekt geladen ist.

this.route.queryParams.subscribe(query => {
    if (query.bar) {
        const page = this; // Referenz auf die Komponente für den Callback 
        const loadFoo = () => {
            if (page.foobar) {
                // Hier habe ich sowohl "foobar" als auch die Query-Parameter
            } else {
                // Hier ist foobar noch nicht geladen
                setTimeout(loadFoo, 50);
           }
       };
       startEdit();
    }
});

In der Subscribtion für die Query-Parameter wird geprüft ob das Objekt, das aus den Path-Parametern geladen werden sollte, da ist. Ist es nicht der Fall, wird dann über setTimeout einfach die Funktion nochmal aufgerufen. Hier muss man sich auch eine Referenz auf die aktuelle Komponente "zwischenspeichern" weil man in dem Callback nicht "this" als Referenz benutzen kann.

0 0 0
Noch keine Stimmen abgegeben
javaguy Aug 21 (20:42)

Eigentlich geht es ganz einfach mit combineLatest in RxJS:

import { combineLatest } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

 combineLatest([
    this.activatedRoute.params, 
    this.activatedRoute.queryParams
    ]).subscribe(values => {
        console.log(values);
});

Wie die Dokumentation sagt, bekommt man mit combineLatest die zuletzt emittierten Werte der Observables, die man auslesen möchte. In diesem Fall sind es params und queryParams der ActivatedRoute.

0 0 0
Noch keine Stimmen abgegeben
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Genauere Informationen finden Sie in unserer Datenschutzerklärung sowie im Impressum.