¿Cuál es la diferencia?
Como ve en su ejemplo, la principal diferencia es mejorar la legibilidad del código fuente. Solo hay dos funciones en su ejemplo, pero imagínese si hay una docena de funciones. entonces será como
function1().function2().function3().function4()
se está poniendo realmente feo y difícil de leer, especialmente cuando estás llenando el interior de las funciones. Además de eso, ciertos editores como el código de Visual Studio no permiten más de 140 líneas de longitud. pero si va como seguir.
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
Esto mejora drásticamente la legibilidad.
Si no hay diferencia, ¿por qué existe la tubería de función?
El propósito de la función PIPE () es agrupar todas las funciones que toman y devuelven observables. Toma un observable inicialmente, luego ese observable se usa en toda la función pipe () por cada función que se usa dentro de él.
La primera función toma el observable, lo procesa, modifica su valor y pasa a la siguiente función, luego la siguiente función toma la salida observable de la primera función, la procesa y pasa a la siguiente función, luego continúa hasta todas las funciones dentro de la función pipe () use ese observable, finalmente tiene el observable procesado. Al final, puede ejecutar la función observable con subscribe () para extraer el valor de ella. Recuerde, los valores del observable original no se modifican. !!
¿Por qué esas funciones necesitan diferentes importaciones?
Las importaciones dependen de dónde se especifique la función en el paquete rxjs. Dice así. Todos los módulos se almacenan en la carpeta node_modules en Angular. importar {clase} desde "módulo";
Tomemos el siguiente código como ejemplo. Lo acabo de escribir en stackblitz. Así que nada se genera automáticamente ni se copia desde otro lugar. No veo el punto de copiar lo que se indica en la documentación de rxjs cuando puede ir y leerlo también. Supongo que hizo esta pregunta aquí, porque no entendió la documentación.
- Hay clases de mapa de tubería, observables, de, importadas de los módulos respectivos.
- En el cuerpo de la clase, utilicé la función Pipe () como se ve en el código.
La función Of () devuelve un observable, que emite números en secuencia cuando se suscribe.
Observable aún no está suscrito.
Cuando lo usó como Observable.pipe (), la función pipe () usa el Observable dado como entrada.
La primera función, la función map () usa ese Observable, lo procesa, devuelve el Observable procesado a la función pipe (),
entonces ese Observable procesado se da a la siguiente función si hay alguna,
y así continúa hasta que todas las funciones procesan el Observable,
al final que Observable es devuelto por la función pipe () a una variable, en el siguiente ejemplo su obs.
Ahora, lo que pasa en Observable es que, mientras el observador no lo suscriba, no emite ningún valor. Entonces utilicé la función subscribe () para suscribirme a este Observable, tan pronto como lo suscribí. La función of () comienza a emitir valores, luego se procesan a través de la función pipe () y se obtiene el resultado final al final, por ejemplo, se toma 1 de la función of (), 1 se agrega 1 en la función map (), y regresó. Puede obtener ese valor como argumento dentro de la función subscribe (función ( argumento ) {}).
Si desea imprimirlo, utilice como
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()Te permite pasar los operadores que creas?