Apa itu fungsi pipa () di Angular

Pipa adalah filter untuk mengubah data (format) di template.

Saya menemukan pipe()fungsi seperti di bawah ini. Apa pipe()sebenarnya arti fungsi ini dalam kasus ini?

return this.http.get<Hero>(url)
  .pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
);

Jangan bingung dengan konsep Angular dan RxJS

Kami memiliki konsep pipa di Angular dan pipe()berfungsi di RxJS.

1) Pipes in Angular : Sebuah pipa menerima data sebagai masukan dan mengubahnya menjadi keluaran yang diinginkan
https://angular.io/guide/pipes

2) pipe()fungsi di RxJS : Anda dapat menggunakan pipa untuk menghubungkan operator bersama. Pipa memungkinkan Anda menggabungkan beberapa fungsi menjadi satu fungsi.

The pipe()Fungsi mengambil sebagai argumen fungsi Anda ingin menggabungkan, dan mengembalikan fungsi baru yang, ketika dijalankan, menjalankan fungsi disusun dalam urutan.
https://angular.io/guide/rx-library (cari pipa di URL ini, Anda dapat menemukan yang sama)

Jadi menurut pertanyaan Anda, Anda merujuk pipe()fungsi di RxJS

Pipa yang Anda bicarakan di deskripsi awal berbeda dari pipa yang Anda tunjukkan di contoh.

Dalam Angular (2 | 4 | 5) Pipa digunakan untuk memformat tampilan seperti yang Anda katakan. Saya pikir Anda memiliki pemahaman dasar tentang pipa di Angular, Anda dapat mempelajarinya lebih lanjut dari tautan ini - Angular Pipe Doc

Yang pipe()Anda tunjukkan dalam contoh adalah pipe()metode RxJS 5.5 (RxJS adalah default untuk semua aplikasi Angular). Di Angular5 semua operator RxJS dapat diimpor menggunakan impor tunggal dan sekarang digabungkan menggunakan metode pipa.

tap()- Operator tap RxJS akan melihat nilai Observable dan melakukan sesuatu dengan nilai itu. Dengan kata lain, setelah permintaan API berhasil, tap()operator akan melakukan fungsi apa pun yang Anda inginkan dengan responsnya. Dalam contoh, itu hanya akan mencatat string itu.

catchError()- catchError melakukan hal yang persis sama tetapi dengan respons kesalahan. Jika Anda ingin melakukan kesalahan atau ingin memanggil beberapa fungsi jika Anda mendapatkan kesalahan, Anda dapat melakukannya di sini. Dalam contoh, itu akan memanggil handleError()dan di dalamnya, itu hanya akan mencatat string itu.

Operator RxJS adalah fungsi yang dibangun di atas fondasi yang dapat diamati untuk memungkinkan manipulasi koleksi yang canggih.

Misalnya, RxJS mendefinisikan operator seperti map(), filter(), concat(), dan flatMap().

Anda dapat menggunakan pipa untuk menghubungkan operator bersama. Pipa memungkinkan Anda menggabungkan beberapa fungsi menjadi satu fungsi.

The pipe()Fungsi mengambil sebagai argumen fungsi Anda ingin menggabungkan, dan mengembalikan fungsi baru yang, ketika dijalankan, menjalankan fungsi disusun dalam urutan.

Anda harus melihat dokumentasi resmi ReactiveX: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md .

Ini adalah artikel bagus tentang perpipaan di RxJS: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .

Singkatnya .pipe () memungkinkan merantai beberapa operator yang dapat disambungkan.

Mulai dari versi 5.5 RxJS telah mengirimkan "operator yang dapat dialirkan" dan mengganti nama beberapa operator:

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

Dua jenis Pipes Angular - Pipes dan RxJS - Pipes yang sangat berbeda

Pipa Sudut

Sebuah pipa menerima data sebagai masukan dan mengubahnya menjadi keluaran yang diinginkan. Di halaman ini, Anda akan menggunakan pipa untuk mengubah properti tanggal lahir komponen menjadi tanggal yang ramah-manusia.

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 - Pipa

Operator yang dapat diamati disusun menggunakan metode pipa yang dikenal sebagai Operator Pipa. Berikut ini contohnya.

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));

Output untuk ini di konsol adalah sebagai berikut:

0

6

12

18

Untuk variabel apa pun yang memiliki observable, kita dapat menggunakan metode .pipe () untuk meneruskan satu atau beberapa fungsi operator yang dapat bekerja dan mengubah setiap item dalam koleksi yang dapat diamati.

Jadi contoh ini mengambil setiap angka dalam rentang 0 sampai 10, dan mengalikannya dengan 2. Kemudian, filter berfungsi untuk memfilter hasil menjadi hanya angka ganjil.