Was ist die Funktion pipe () in Angular?

Pipes sind Filter zum Transformieren von Daten (Formaten) in der Vorlage.

Ich bin auf die pipe()Funktion wie folgt gestoßen. Was bedeutet diese pipe()Funktion in diesem Fall genau?

return this.http.get<Hero>(url)
  .pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
);

Verwechseln Sie sich nicht mit den Konzepten von Angular und RxJS

Wir haben ein Rohrkonzept in Angular und eine pipe()Funktion in RxJS.

1) Pipes in Angular : Eine Pipe nimmt Daten als Eingabe auf und wandelt sie in die gewünschte Ausgabe
https://angular.io/guide/pipes um

2) pipe()Funktion in RxJS : Sie können Pipes verwenden, um Operatoren miteinander zu verbinden. Mit Pipes können Sie mehrere Funktionen zu einer einzigen Funktion kombinieren.

Die pipe()Funktion verwendet als Argumente die Funktionen, die Sie kombinieren möchten, und gibt eine neue Funktion zurück, die bei Ausführung die zusammengesetzten Funktionen nacheinander ausführt.
https://angular.io/guide/rx-library (Suche nach Pipes in dieser URL, du kannst das gleiche finden)

Entsprechend Ihrer Frage beziehen Sie sich also auf die pipe()Funktion in RxJS

Die Pipes, über die Sie in der Startbeschreibung sprechen, unterscheiden sich von den Pipes, die Sie im Beispiel gezeigt haben.

In Angular (2 | 4 | 5) werden Pipes verwendet, um die Ansicht wie gesagt zu formatieren. Ich denke, Sie haben ein grundlegendes Verständnis für Rohre in Angular. Weitere Informationen hierzu finden Sie unter diesem Link - Angular Pipe Doc

Das, was pipe()Sie im Beispiel gezeigt haben, ist die pipe()Methode von RxJS 5.5 (RxJS ist die Standardeinstellung für alle Angular-Apps). In Angular5 können alle RxJS- Operatoren mit einem einzigen Import importiert werden und werden jetzt mit der Pipe-Methode kombiniert.

tap()- Der RxJS-Tap-Operator überprüft den Observable-Wert und macht etwas mit diesem Wert. Mit anderen Worten, nach einer erfolgreichen API-Anforderung führt der tap()Bediener jede Funktion aus, die er mit der Antwort ausführen soll. Im Beispiel wird nur diese Zeichenfolge protokolliert.

catchError()- catchError macht genau das Gleiche, jedoch mit Fehlerantwort. Wenn Sie einen Fehler auslösen oder eine Funktion aufrufen möchten, wenn Sie einen Fehler erhalten, können Sie dies hier tun. Im Beispiel wird es aufgerufen handleError()und darin wird nur diese Zeichenfolge protokolliert.

RxJS- Operatoren sind Funktionen, die auf der Observables-Grundlage aufbauen, um eine differenzierte Manipulation von Sammlungen zu ermöglichen.

Zum Beispiel definiert RxJS Operatoren wie map(), filter(), concat(), und flatMap().

Sie können Pipes verwenden, um Operatoren miteinander zu verbinden. Mit Pipes können Sie mehrere Funktionen zu einer einzigen Funktion kombinieren.

Die pipe()Funktion verwendet als Argumente die Funktionen, die Sie kombinieren möchten, und gibt eine neue Funktion zurück, die bei Ausführung die zusammengesetzten Funktionen nacheinander ausführt.

Sie müssen die offizielle ReactiveX-Dokumentation lesen: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md .

Dies ist ein guter Artikel über Rohrleitungen in RxJS: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .

Kurz gesagt, .pipe () ermöglicht die Verkettung mehrerer pipeable Operatoren.

Ab Version 5.5 hat RxJS "pipeable operator" ausgeliefert und einige Operatoren umbenannt:

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

Zwei sehr unterschiedliche Arten von Rohren Angular - Pipes und RxJS - Pipes

Winkelrohr

Eine Pipe nimmt Daten als Eingabe auf und wandelt sie in eine gewünschte Ausgabe um. Auf dieser Seite verwenden Sie Pipes, um die Geburtstagseigenschaft einer Komponente in ein menschenfreundliches Datum umzuwandeln.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

RxJS - Rohr

Beobachtbare Operatoren werden unter Verwendung einer Rohrleitungsmethode zusammengesetzt, die als Rohrleitungsoperatoren bekannt ist. Hier ist ein Beispiel.

import {Observable, range} from 'rxjs';
import {map, filter} from 'rxjs/operators';

const source$: Observable<number> = range(0, 10);

source$.pipe(
    map(x => x * 2),
    filter(x => x % 3 === 0)
).subscribe(x => console.log(x));

Die Ausgabe hierfür in der Konsole wäre die folgende:

0

6

12

18

Für jede Variable, die eine Observable enthält, können wir die .pipe () -Methode verwenden, um eine oder mehrere Operatorfunktionen zu übergeben, mit denen jedes Element in der Observable-Sammlung bearbeitet und transformiert werden kann.

In diesem Beispiel wird jede Zahl im Bereich von 0 bis 10 genommen und mit 2 multipliziert. Anschließend filtert die Filterfunktion das Ergebnis nur auf die ungeraden Zahlen herunter.