Pipes

1. Using Pipes

Một pipes có trong dữ liệu đầu vào và biến đổi nó vào một đầu ra mong muốn.

Dưới đây là một mini-app hoàn chỉnh với một DatePipes.

Tập trung vào component's template để xem làm thế nào chúng ta áp dụng được xây dựng trong DatePipes trong khi ràng buộc birthday property.

2. Built - in pipes

Angular đi kèm với một bộ stock của pipes như DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe và PercentPipe. Chúng đều có sẵn để sử dụng bất kì trong một template nào.

3. Parameterizing a Pipes

Một pipes có thể chấp bất kỳ số lượng các thông số tùy chọn để fine-tune đầu ra của nó.

Chúng ta thêm tham số cho một pipes bằng cách làm theo các tên pipes bằng dấu (:) và sau đó các giá trị tham số (ví dụ: currency:'EUR'). Nếu pipes chấp nhận nhiều thông số, chúng ta tách biệt giá trị với dấu hai chấm (ví dụ: slice:1:5).

Ví dụ ngày sinh nhật của chúng ta để cung cấp cho các pipes một tham số định dạng. Ngày định dạng sẽ hiển thị như 04/15/88.

Các giá trị tham số có thể là bất kỳ biểu mẫu hợp lệ như một chuỗi chữ hoặc một thuộc tính thành phần.

Chúng ta hãy xem lại ví dụ của chúng ta để ràng buộc của pipes dạng tham số với định dạng component.

Chúng ta cũng đã thêm một nút trong template và ràng buộc sự kiện click phương thức toogleFormat của component. Đó là phương thức toogles định dạng một component ngắn ('shortDate') và một định dạng dài hơn ('fullDate').

Chúng ta click vào nút các ngày luân chuyển giữa "04/15/1988" và "Friday, April 15, 1988".

4. Chaining Pipes

Trong ví dụ sau chúng ta chuỗi ngày sinh nhật với DatePipe và tiếp đến là UpperPipe vì vậy chúng ta có thể hiển thị ngày sinh nhật bằng chữ hoa.Hiển thị ngày sinh nhật là APR 15, 1988.

Nếu chúng ta vượt qua một tham số để lọc, chúng ta phải thêm dấu ngoặc đơn để giúp trình biên dịch template với trình tự đánh giá.

Ví dụ sau sẽ hiển thị FRIDAY, APRIL 15, 1988.

5. Custom Pipes

Tạo một file mới exponential-strength-pipe.ts

Định nghĩa pipe này cho thấy một số điểm quan trọng:

1. Chúng ta import Pipe decorator từ thư viện Angular (trong khi nhận được những biểu tượng thông thường).
2. Một pipe là một lớp.
3. Chúng ta trang trí lớp với hàm @Pipe decorator.
4. Các @Pipe decorator mất một đối tượng với một property có giá trị là tên pipe mà chúng ta sẽ sử dụng bên trong một template expression. Nó phải là một định danh JavaScript hợp lệ. Tên pipe của chúng ta là exponenentialStrength.
5. Lớp pipe thực hiện một phương thức transform.
6. transform có một giá trị và một mảng tùy chọn của chuỗi. Giá trị có thể là kiểu bất kỳ nhưng mảng đối số phải là một mảng của chuỗi.
7. Sẽ có một mục trong mảng cho mỗi tham số được truyền cho pipe.
8. transform trả về modified value mà Angular chuyển đổi thành một chuỗi.

Bây giờ chúng ta tạo một component để chứng minh một pipes:

6. Power Boost Calculator (extra-credit)

Không có nhiều bản cập nhật để kiểm tra custom pipe. Chúng ta có thể nâng cấp ví dụ cho một "Power Boost Calculator" kết hợp dữ liệu pipe và hai chiều của chúng ta ràng buộc với ng-model.

7. Stateful Pipes

Có hai loại pipes: stateless và stateful.

Stateless pipe là hàm pure chạy dữ liệu đầu vào thông qua mà không nhớ bất cứ điều gì hoặc gây ra phát hiện tác dụng phụ.

Hầu hết các pipe là stateless pipe. Các Datepipe trong ví dụ đầu tiên của chúng là một stateless pipe.

Stateful pipe có khái niệm tương tự như các lớp trong lập trình hướng đối tượng. Nó có thể quản lý dữ liệu transform. Một pipe tạo ra một yêu cầu HTTP, lữu trữ các response và hiển thị đầu ra là stateful pipe. Pipe lấy hoặc request dữ liệu nên được sử dụng thận trọng, kể từ khi làm việc với các dữ liệu mạng có xu hướng để giới thiệu các điều kiện lỗi đó được xử lý tốt hơn trong JavaScript hơn trong một template. Chúng ta có thể giảm thiểu nguy cơ này bằng cách tạo ra một pipe tùy chỉnh cho một phụ trợ đặc biệt và bake-in trong các lỗi xử lý cần thiết.