Observable bedeutet zu deutsch: „Beobachtbares“
Die Funktion: mit switchMap kann zum Observable geschalten werden, welches sich zuletzt geändert hat („switch to a new observable“).
Der switchMap-Operator aus der RxJS-Bibliothek bildet jedes Element auf ein Observable ab. Er ordnet alle empfangenen Observables auf einer Ebene ein. Der switchMap-Operator projiziert jeden Wert aus der Quelle in ein Observable und führt dieses in einem Ziel-Observable zusammen, welches vom switchMap-Operator schließlich ausgegeben wird. Im Ziel-Observable finden sich immer nur die Werte, die vom zuletzt von der Quelle abgegebenen Observable empfangen wurden.
Die Syntax des switchMap-Operators
switchMap<T, R, O extends ObservableInput>(project: (value: T, index: number) => O, resultSelector?: (outerValue: T, innerValue: ObservedValueOf, outerIndex: number, innerIndex: number) => R): OperatorFunction<T, ObservedValueOf | R>
Der Parameter project in der Syntax ist eine Funktion, die ein Observable zurück gibt, sobald sie auf ein Element angewandt wird, das von einem Quell-Observable ausgegeben wurde.
Der Parameter resultSelector ist optionell und der Standardwert dieses Parameters ist nicht definiert. Der Rückgabewert, „OperatorFunction<T, ObservedValueOf | R>“, ist ein Observable, welches das Ergebnis liefert, das aus der Anwendung der projection-Funktion (und dem optionalen, veralteten [„deprecated“] resultSelector) auf jedes Element, welches aus dem Quell-Observable übergeben wird, resultiert, wobei nur die Werte des zuletzt proijezierten, inneren Observables verwendet werden.
Den switchMap-Operator in Angular anwenden
Der switchMap-Operator liefert ein Observable zurück, das Elemente ausgibt, auf welche eine Funktion, die dem Operator als Parameter mitgeliefert wird, angewandt wird. Dabei wird die Funktion auf jedes Element, das vom Quell-Observable kommt, angewandt. Diese Funktion gibt bei jeder Anwendung intern im switchMap-Operator ein inneres Observable zurück. Jedes Mal wenn eines dieser inneren Observable in Betracht gezogen wird, beginnt das von der switchMap zurückgelieferte Observable, die Elemente dieses inneren Observables auszugeben.
Wenn ein neues, inneres Observable verarbeitet wird, beendet switchMap die Ausgabe der Elemente des vorher ausgelieferten, inneren Observable und beginnt, die Elemente des neuen, inneren Observable zurück zu liefern. Dieser switchMap-Prozess setzt sich kontinuierlich für jedes folgende, innere Observable fort.
switchMap-Einsatz beim Angular Routing
Der switchMap-Operator kann mit Angulars Activated Route verwendet werden.
Als erstes müssen Router, ActivatedRoute und ParamMap Wertmarken [„token“] aus dem router-Paket importiert werden. Anschließend muss der switchMap-Operator importiert werden, der dazu verwendet wird, die beobachtbaren [„observable“] route-Parameter abzuarbeiten. Wie gewöhnlich schreiben wir einen constructor, der Angular anfragt, services einzuspeisen, welche die Komponente benötigt, und diese mithilfe privater Variablen zu referenzieren.
In der ngOnInit-Methode verwenden wir den ActivatedRoute service, um die Parameter für das route-Objekt abzurufen, den employee ID aus den Parametern heraus zu ziehen und den employee zu extrahieren, den wir anzeigen wollen. Die Abarbeitung der paramMap ist etwas knifflig. Wenn die map sich ändert, bekommen [„get()“] wir die ID Parameter von den geänderten Parametern. Man könnte denken, jetzt wäre die Gelegenheit die RxJS map zu verwenden, der EmployeeService Operator liefert jedoch ein Observable zurück. Deswegen ebnen wir stattdessen das Observable mit dem switchMap-Operator ein. Zusätzlich verwirft der switchMap-Operator vorhergehende, „fliegende“ Anfragen. Wenn der Benutzer mit einer neuen ID zur gleichen Route zurück kehrt während der EmployeeService noch eine alte ID verarbeitet, verwirft switchMap die alte Anfrage und liefert den employee für die neue ID zurück.
Teilweise Übersetzung des Artikels von Yallaling Goudar. Code-Beispiele und weitere Ausführungen dort.
Ebenso ein nützlicher Link: switchMap auf Learn RxJS.
