Was ist der Unterschied?
Wie Sie in Ihrem Beispiel sehen, besteht der Hauptunterschied darin, die Lesbarkeit des Quellcodes zu verbessern. In Ihrem Beispiel gibt es nur zwei Funktionen, aber stellen Sie sich vor, es gibt ein Dutzend Funktionen? dann wird es so gehen
function1().function2().function3().function4()
Es wird wirklich hässlich und schwer zu lesen, besonders wenn Sie die Funktionen ausfüllen. Darüber hinaus erlauben bestimmte Editoren wie Visual Studio-Code nicht mehr als 140 Zeilen Länge. aber wenn es wie folgt geht.
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
Dies verbessert die Lesbarkeit drastisch.
Wenn es keinen Unterschied gibt, warum existiert die Funktionspipe?
Der Zweck der PIPE () - Funktion besteht darin, sich zusammenzufassen alle Funktionen , die nehmen, und zurück zu beobachten. Zunächst wird ein Observable benötigt, dann wird dieses Observable von jeder darin verwendeten Funktion in der gesamten pipe () -Funktion verwendet.
Die erste Funktion nimmt das Observable, verarbeitet es, ändert seinen Wert und geht zur nächsten Funktion über. Die nächste Funktion nimmt das von der ersten Funktion beobachtbare Ergebnis, verarbeitet es und übergibt es zur nächsten Funktion. Dann geht es weiter, bis alle Funktionen erfüllt sind Verwenden Sie innerhalb der Pipe () -Funktion dieses Observable. Schließlich haben Sie das verarbeitete Observable. Am Ende können Sie die Funktion Observable with subscribe () ausführen, um den Wert daraus zu extrahieren. Denken Sie daran, dass die Werte in der ursprünglichen beobachtbaren Größe nicht geändert werden. !!
Warum benötigen diese Funktionen unterschiedliche Importe?
Importe hängen davon ab, wo die Funktion im Paket rxjs angegeben ist. Es geht so. Alle Module werden im Ordner node_modules in Angular gespeichert. {class} aus "module" importieren;
Nehmen wir als Beispiel den folgenden Code. Ich habe es gerade in Stackblitz geschrieben. Es wird also nichts automatisch generiert oder von einem anderen Ort kopiert. Ich sehe keinen Sinn darin, das zu kopieren, was in der Dokumentation von rxjs angegeben ist, wenn Sie es auch lesen können. Ich gehe davon aus, dass Sie diese Frage hier gestellt haben, weil Sie die Dokumentation nicht verstanden haben.
- Es gibt beobachtbare Pipe-Map-Klassen, die aus den jeweiligen Modulen importiert wurden.
- Im Hauptteil der Klasse habe ich die Pipe () -Funktion verwendet, wie im Code gezeigt.
Die Of () -Funktion gibt ein Observable zurück, das beim Abonnieren nacheinander Zahlen ausgibt.
Observable ist noch nicht abonniert.
Wenn Sie Observable.pipe () mögen, verwendet die Funktion pipe () das angegebene Observable als Eingabe.
Die erste Funktion, map (), verwendet diese Observable, verarbeitet sie und gibt die verarbeitete Observable an die pipe () -Funktion zurück.
dann wird das verarbeitete Observable an die nächste Funktion übergeben, falls es welche gibt,
und es geht so weiter, bis alle Funktionen das Observable verarbeiten,
Am Ende wird Observable von der Funktion pipe () an eine Variable zurückgegeben. Im folgenden Beispiel ist es obs.
Nun ist die Sache in Observable: Solange der Beobachter es nicht abonniert hat, gibt es keinen Wert aus. Also habe ich die Funktion subscribe () verwendet, um dieses Observable zu abonnieren, und sobald ich es abonniert habe. Die Funktion of () gibt Werte aus, dann werden sie über die Funktion pipe () verarbeitet, und am Ende erhalten Sie das Endergebnis. Beispiel: 1 wird aus der Funktion () übernommen, 1 wird 1 in der Funktion map () hinzugefügt. und kehrte zurück. Sie können diesen Wert als Argument innerhalb der Funktion subscribe (function ( argument ) {}) abrufen.
Wenn Sie es drucken möchten, verwenden Sie als
subscribe( function (argument) {
console.log(argument)
}
)
import { Component, OnInit } from '@angular/core';
import { pipe } from 'rxjs';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
obs = of(1,2,3).pipe(
map(x => x + 1),
);
constructor() { }
ngOnInit(){
this.obs.subscribe(value => console.log(value))
}
}
https://stackblitz.com/edit/angular-ivy-plifkg
pipe()Sie von Ihnen erstellte Operatoren übergeben?