Subscription zu Query- und Route Parametern in Angular/RxJS

30 Mär. 2020RxJSTypeScriptAngular

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?

Abgestimmt in Hilfreich
Noch keine Kommentare
  • 21 Aug. 2020

    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.

    Noch keine Stimmen abgegeben
    Noch keine Kommentare
  • 26 Mai 2020

    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.

    Noch keine Stimmen abgegeben
    Noch keine Kommentare