Subscription zu Query- und Route Parametern in Angular/RxJS

Question

5

Answer 1

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.

Answer 2

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.