Deux types très différents de tuyaux angulaires - tuyaux et RxJS - tuyaux
Tuyau angulaire
Un tuyau prend des données en entrée et les transforme en une sortie souhaitée. Dans cette page, vous utiliserez des tuyaux pour transformer la propriété d'anniversaire d'un composant en une date conviviale.
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 - Tuyau
Les opérateurs observables sont composés à l'aide d'une méthode de canalisation connue sous le nom d'opérateurs de tuyauterie. Voici un exemple.
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));
La sortie pour cela dans la console serait la suivante:
0
6
12
18
Pour toute variable contenant une observable, nous pouvons utiliser la méthode .pipe () pour transmettre une ou plusieurs fonctions d'opérateur qui peuvent travailler et transformer chaque élément de la collection observable.
Ainsi, cet exemple prend chaque nombre dans la plage de 0 à 10 et le multiplie par 2. Ensuite, la fonction de filtrage pour filtrer le résultat jusqu'aux nombres impairs.