Potoki
Każda aplikacja ma w zasadzie to samo proste zadanie - pobrać i wyświetlić dane. W toku prac zauważamy, że dokonujemy często tych samych transformacji pewnych danych. Idealnym rozwiązaniem byłoby dodawanie tych transformacji w HTML-u podobnie jak dodajemy style.
Z pomocą przychodzą nam potoki (ang. pipes).
podstawy
Aby skorzystać z potoku używamy notacji jaką możemy znać między innymi z systemu Linux.
{{ beer.name | uppercase }}
Dodatkowe parametry potoku umieszczamy po znaku :.
{{ beer.name | slice: 10 }}
Możemy również łączyć ze sobą potoki.
{{ beer.name | slice: 10 | uppercase }}
wbudowane potoki
Angular ma zbiór wbudowanych potoków dostępnych w każdym szablonie.
Oto kilka z nich:
DatePipe,JsonPipe,CurrencyPipe,DecimalPipe,PercentPipe,SlicePipe,LowerCasePipe,UpperCasePipe,TitleCasePipe.
Tworzenie potoków
Oczywiście mamy również możliwość tworzenia swoich własnych potoków.
Potok jest to klasa posiadająca dekorator @Pipe(), do którego przekazujemy jego metadane - najważniejsza jest nazwa.
@Pipe({name: 'cutWords'})
export class CutWordsPipe {}
Drugą istotną kwestią jest implementacja interfejsu PipeTransform.
export class CutWordsPipe implements PipeTransform {
transform(value: string, length: number): string {
// ...
return value;
}
}
- - -
Zdefiniujemy potok służący do przycinania napisów do wskazanej długości ale bez rozcinania słów. Następnie wykorzystamy go na widoku listy piw do przycinania opisów do maksymalnie 80 znaków.
Przykłady: cut-words.pipe.ts, shared/beers-list.component.html v27