Apa itu fungsi pipa () di Angular

109

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

— Dinesh Sharma
sumber

2

github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md

— cartant

3

@Ajay Saya mendapatkan halaman ini dan banyak referensi ke | penggunaan. Yang tidak menjawab apa itu pipa rxjs.

— 182764125216

124

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

— Siwa Nayak Dharavath
sumber

43

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.

— BhargavG
sumber

"pipa yang Anda bicarakan di deskripsi awal ..." -> tidak, mereka tidak berbeda. ; Menurut pendapat saya, pertanyaannya sangat jelas (tidak ada kebingungan apa pun yang mungkin). Ada banyak konsep dalam pemrograman yang bisa disebut "pipa", tetapi dengan sangat spesifik dalam deskripsinya, dan menyebutnya "fungsi pipa" dia menghilangkan semua kemungkinan kebingungan. Aku tidak tahu bagaimana lagi dia bisa memanggil mereka.

— bvdb

1

"Pipa adalah filter untuk mengubah data (format) di template." Di sini dia berbicara tentang pipa di Angular 2+, seperti tanggal, pipa huruf besar disediakan di Angular (yang persis seperti yang dia katakan yaitu format data di template) Dan dalam deskripsi dia telah menunjukkan contoh fungsi pipa RXJS . Jadi ya 2 hal itu sama sekali berbeda.

— BhargavG

Aku mengambilnya kembali, mea culpa. Mengabaikan kalimat itu. Saya berharap saya bisa membatalkan -1. :( Tapi sayangnya terkunci.

— bvdb

itu bukan masalah besar. Senang karena itu menghilangkan semua keraguan. Bersulang :-)

— BhargavG

15

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.

— manoj
sumber

Apakah kamu punya contoh?

— lofihelsinki

Dalam contoh di bawah ini kami telah menyalurkan fungsi filter dan peta. Sekarang kedua fungsi akan dijalankan secara berurutan seperti yang diberikan dalam contoh. Pertama, ini akan memfilter hasil dan kemudian akan memetakan hasilnya. Semoga bisa membantu. impor {filter, map} dari 'rxjs / operator'; const squareOdd = dari (1, 2, 3, 4, 5) .pipe (filter (n => n% 2! == 0), map (n => n * n)); // Berlangganan untuk mendapatkan nilai squareOdd.subscribe (x => console.log (x));

— manoj

Benar-benar jawaban yang sangat baik, tetapi sangat disayangkan jumlah suara yang sangat sedikit. +1 dari saya.

— Ashok kumar

7

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

— Oleksandr Sachuk
sumber

6

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.

— CharithJ
sumber