Hàm pipe () trong Angular là gì

Pipes là bộ lọc để chuyển đổi dữ liệu (định dạng) trong mẫu.

Tôi đã xem qua pipe()chức năng như bên dưới. pipe()Chức năng này chính xác có nghĩa là gì trong trường hợp này?

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

Đừng nhầm lẫn với các khái niệm về Angular và RxJS

Chúng tôi có khái niệm đường ống trong Angular và pipe()chức năng trong RxJS.

1) Pipes in Angular : Một đường ống lấy dữ liệu làm đầu vào và chuyển nó thành đầu ra mong muốn
https://angular.io/guide/pipes

2) pipe()chức năng trong RxJS : Bạn có thể sử dụng các đường ống để liên kết các toán tử với nhau. Pipes cho phép bạn kết hợp nhiều chức năng thành một chức năng duy nhất.

Các pipe()chức năng mất như các đối số của nó các chức năng bạn muốn kết hợp, và trả về một chức năng mới đó, khi thực hiện, chạy các chức năng bao gồm theo thứ tự.
https://angular.io/guide/rx-library (tìm kiếm các đường ống trong URL này, bạn có thể tìm thấy cùng một)

Vì vậy, theo câu hỏi của bạn, bạn đang giới thiệu pipe()hàm trong RxJS

Các đường ống bạn đang nói đến trong phần mô tả ban đầu khác với đường ống bạn đã hiển thị trong ví dụ.

Trong Angular (2 | 4 | 5) Pipes được sử dụng để định dạng view như bạn đã nói. Tôi nghĩ bạn đã hiểu cơ bản về các đường ống trong Angular, bạn có thể tìm hiểu thêm về điều đó từ liên kết này - Angular Pipe Doc

Phương thức pipe()bạn đã hiển thị trong ví dụ là pipe()phương thức của RxJS 5.5 (RxJS là mặc định cho tất cả các ứng dụng Angular). Trong Angular5, tất cả các toán tử RxJS có thể được nhập bằng cách nhập một lần và chúng hiện được kết hợp bằng cách sử dụng phương pháp ống.

tap()- Toán tử tap RxJS sẽ xem xét giá trị có thể quan sát được và làm điều gì đó với giá trị đó. Nói cách khác, sau khi yêu cầu API thành công, người tap()vận hành sẽ thực hiện bất kỳ chức năng nào bạn muốn nó thực hiện với phản hồi. Trong ví dụ, nó sẽ chỉ ghi lại chuỗi đó.

catchError()- catchError thực hiện chính xác điều tương tự nhưng với phản hồi lỗi. Nếu bạn muốn ném lỗi hoặc muốn gọi hàm nào đó nếu gặp lỗi, bạn có thể thực hiện tại đây. Trong ví dụ, nó sẽ gọi handleError()và bên trong đó, nó sẽ chỉ ghi lại chuỗi đó.

Toán tử RxJS là các hàm được xây dựng trên nền tảng có thể quan sát được để cho phép thao tác phức tạp với các tập hợp.

Ví dụ, RxJS định nghĩa các nhà khai thác như map(), filter(), concat(), và flatMap().

Bạn có thể sử dụng đường ống để liên kết các nhà khai thác với nhau. Pipes cho phép bạn kết hợp nhiều chức năng thành một chức năng duy nhất.

Các pipe()chức năng mất như các đối số của nó các chức năng bạn muốn kết hợp, và trả về một chức năng mới đó, khi thực hiện, chạy các chức năng bao gồm theo thứ tự.

Bạn phải xem tài liệu chính thức về ReactiveX: https://github.com/ReactiveX/rxjs/blob/master/doc/pipable-operators.md .

Đây là một bài viết hay về đường ống trong RxJS: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .

Tóm lại, .pipe () cho phép xâu chuỗi nhiều toán tử có thể phân phối.

Bắt đầu từ phiên bản 5.5 RxJS đã xuất xưởng "các toán tử có thể chuyển được" và đổi tên một số toán tử:

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

Hai loại ống Angular rất khác nhau - Pipes và RxJS - Pipes

Angular-Pipe

Một đường ống nhận dữ liệu làm đầu vào và biến đổi nó thành đầu ra mong muốn. Trong trang này, bạn sẽ sử dụng các đường ống để chuyển thuộc tính ngày sinh của một thành phần thành một ngày thân thiện với con người.

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 - Ống

Các toán tử có thể quan sát được tạo ra bằng cách sử dụng một phương pháp ống được gọi là các toán tử có thể nhìn thấy. Đây là một ví dụ.

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

Đầu ra cho điều này trong bảng điều khiển sẽ như sau:

0

6

12

18

Đối với bất kỳ biến nào chứa một biến có thể quan sát được, chúng ta có thể sử dụng phương thức .pipe () để chuyển một hoặc nhiều hàm toán tử có thể hoạt động và biến đổi từng mục trong tập hợp có thể quan sát.

Vì vậy, ví dụ này lấy mỗi số trong phạm vi từ 0 đến 10 và nhân nó với 2. Sau đó, chức năng lọc để lọc kết quả xuống chỉ còn các số lẻ.