Due tipi molto diversi di tubi angolari - tubi e RxJS - tubi
Angular-Pipe
Una pipe accetta i dati come input e li trasforma in un output desiderato. In questa pagina, utilizzerai le pipe per trasformare la proprietà del compleanno di un componente in una data amichevole.
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 - Tubo
Gli operatori osservabili sono composti utilizzando un metodo pipe noto come operatori pipeable. Ecco un esempio.
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));
L'output per questo nella console sarebbe il seguente:
0
6
12
18
Per ogni variabile che contiene un osservabile, possiamo utilizzare il metodo .pipe () per passare una o più funzioni operatore che possono lavorare e trasformare ogni elemento nella raccolta osservabile.
Quindi questo esempio prende ogni numero nell'intervallo da 0 a 10 e lo moltiplica per 2. Quindi, la funzione di filtro filtra il risultato fino ai soli numeri dispari.