Borular, şablondaki verileri (formatları) dönüştürmek için filtrelerdir.
İşleve pipe()aşağıdaki gibi rastladım . Bu pipe()işlev bu durumda tam olarak ne anlama geliyor?
return this.http.get<Hero>(url)
.pipe(
tap(_ => this.log(`fetched hero id=${id}`)),
catchError(this.handleError<Hero>(`getHero id=${id}`))
);
Yanıtlar:
Angular ve RxJS kavramlarıyla karıştırmayın
pipe()Angular'da boru konseptimiz ve RxJS'de fonksiyonumuz var.
1) Açısal Borular : Bir boru, verileri girdi olarak alır ve istenen çıktıya dönüştürür
https://angular.io/guide/pipes
2) pipe()RxJS'de işlev : Operatörleri birbirine bağlamak için boruları kullanabilirsiniz. Borular, birden fazla işlevi tek bir işlevde birleştirmenize izin verir.
pipe()İşlevi argüman olarak Birleştirmek istediğiniz işlevleri alır ve, çalıştırıldığında, sırayla oluşan fonksiyonları çalışır yeni bir işlev döndürür.
https://angular.io/guide/rx-library (bu URL'de boruları arayın, aynısını bulabilirsiniz)
Yani sorunuza göre pipe(), RxJS'de işlevden bahsediyorsunuz
Başlangıç açıklamasında bahsettiğiniz Borular, örnekte gösterdiğiniz borudan farklı.
Açısal (2 | 4 | 5) Borularda, söylediğiniz gibi görünümü biçimlendirmek için kullanılır. Angular'da borular hakkında temel bir anlayışa sahip olduğunuzu düşünüyorum, bu bağlantıdan daha fazla bilgi edinebilirsiniz - Açılı Boru Belgesi
pipe()Eğer örnekte göstermiştir olduğu pipe()yöntem RxJS 5.5 (RxJS tüm Eğik uygulamalar için varsayılan). Gelen Angular5 tüm RxJS operatörleri bir içe kullanılarak alınabilir ve artık boru yöntemiyle birleştirilir.
tap()- RxJS musluk operatörü Gözlemlenebilir değere bakacak ve bu değerle bir şeyler yapacaktır. Başka bir deyişle, başarılı bir API talebinden sonra, tap()operatör yanıtla birlikte gerçekleştirmesini istediğiniz herhangi bir işlevi yerine getirecektir. Örnekte, yalnızca bu dizeyi günlüğe kaydedecektir.
catchError()- catchError tam olarak aynı şeyi yapar ancak hata yanıtı verir. Bir hata atmak istiyorsanız veya bir hata alırsanız bir işlevi çağırmak istiyorsanız, bunu buradan yapabilirsiniz. Örnekte, arayacak handleError()ve bunun içinde sadece o dizeyi günlüğe kaydedecektir.
RxJS Operatörleri, koleksiyonların sofistike bir şekilde işlenmesini sağlamak için gözlemlenebilir temeli üzerine inşa edilen işlevlerdir.
Örneğin, RxJS gibi operatörler tanımlar map(), filter(), concat()ve flatMap().
Operatörleri birbirine bağlamak için boruları kullanabilirsiniz. Borular, birden fazla işlevi tek bir işlevde birleştirmenize izin verir.
pipe()İşlevi argüman olarak Birleştirmek istediğiniz işlevleri alır ve, çalıştırıldığında, sırayla oluşan fonksiyonları çalışır yeni bir işlev döndürür.
Resmi ReactiveX belgelerine bakmalısınız: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md .
Bu, RxJS'de borulama hakkında iyi bir makaledir: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .
Kısacası .pipe (), birden fazla yönlendirilebilir operatörün zincirlenmesine izin verir.
5.5 sürümünden itibaren RxJS, "yönlendirilebilir operatörler" göndermiş ve bazı operatörleri yeniden adlandırmıştır:
do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize
İki farklı tipte Köşeli Boru - Borular ve RxJS - Borular
Bir boru, verileri girdi olarak alır ve istenen çıktıya dönüştürür. Bu sayfada, bir bileşenin doğum günü özelliğini insan dostu bir tarihe dönüştürmek için borular kullanacaksınız.
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
}
Gözlemlenebilir operatörler, Pipeable Operators olarak bilinen bir boru yöntemi kullanılarak oluşturulur. İşte bir örnek.
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));
Bunun konsoldaki çıktısı aşağıdaki gibi olacaktır:
0
6
12
18
Bir gözlemlenebilir olan herhangi bir değişken için, gözlemlenebilir koleksiyondaki her bir öğe üzerinde çalışabilen ve onu dönüştürebilen bir veya daha fazla operatör işlevini geçirmek için .pipe () yöntemini kullanabiliriz.
Dolayısıyla bu örnek, 0 ile 10 arasındaki her bir sayıyı alır ve 2 ile çarpar. Daha sonra, sonucu yalnızca tek sayılara göre filtrelemek için filtre işlevi.