Potoki

Angular 2 wprowadził nowy sposób filtrowania danych: pipe (potoki). Potoki są zamiennikiem
dla filtrów Angular 1.x.

Używanie potoków

Podobnie jak filtr, pipe pobiera również dane jako dane wejściowe i przekształca je na pożądaną postać. Na przykład na odpowiedni zapis waluty jak w przykładzie poniżej:

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

@Component({
  selector: 'product-price',
  template: `<p>Total price of product is {{ price | currency }}</p>`
})
export class ProductPrice {
  price = 100.1234;
}

Zobacz przykład [032]

Przekazywanie parametrów

Potok może przyjmować opcjonalne parametry, aby zmodyfikować wyjście. Aby przekazać parametry do potoku, po prostu dodaj dwukropek i wartość parametru na końcu wyrażenia potoku:

pipeName: parameterValue

W ten sposób możesz również przekazać wiele parametrów:

pipeName: parameter1: parameter2

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

@Component({
    selector: 'app-root',
    template: '<p>Total price of product is {{ price | currency: "CAD": true: "1.2-4" }}</p>'
})
export class AppComponent {
  price = 100.123456;
}

Zobacz przykład [034]

Łańcuchy potoków

Możemy łączyć ze sobą potoki, aby użyć wielu potoków w jednym wyrażeniu.

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

@Component({
    selector: 'app-root',
    template: 
 '<p>Total price of product is {{ price | currency: "CAD": true: "1.2-4" | lowercase }}</p>'
})
export class ProductPrice {
  price = 100.123456;
}

Zobacz przykład [033]

Potoki ze stanem

Istnieją dwie kategorie potoków:

• Stateless Pipes to czyste funkcje, które przepuszczają dane wejściowe, nie pamiętając niczego ani nie powodując wykrywalnych efektów ubocznych. Większość potoków jest bezstanwych.. CurrencyPipe, którego użyliśmy i własny potok, którą stworzyliśmy, to przykłady takich bezstanowych potoków.

• Stateful Pipes to te, które mogą zarządzać stanem danych. Potok ze stanem tworzy żądanie, przechowuje odpowiedź i wyświetla dane wyjściowe. Stateful Pipes należy stosować ostrożnie.

Angular dostarcza AsyncPipe, który jest stanowy.

AsyncPipe

AsyncPipe może odbierać Promise lubObservable (zob. rozdział "Obserwacje") jako dane wejściowe i zwracać otrzymane wartości po przetworzeniu. Jest to potok ze stanem, ponieważ pobiera dane wejściowe (nie są dane z chwilą uruchomienia potoku).

@Component({
  selector: 'app-root',
  template: `
    <p>Total price of product is {{fetchPrice | async | currency:"CAD":true:"1.2-2"}}</p>
    <p>Seconds: {{seconds | async}} </p>
  `
})
export class AppComponent {
  fetchPrice = new Promise((resolve, reject) => {
    setTimeout(() => resolve(10), 500);
  });

  seconds = Observable.of(0).concat(Observable.interval(1000))
}

Zobacz przykład [036]