我們在上一篇文章中哄芜，了解了什么是 Angular 管道，以及如何使用 Angular 提供的一些常用管道剂桥。本文將進一步深入探討如何創(chuàng)建一個 Angular 管道忠烛，實現(xiàn)對數(shù)據(jù)的自定義轉(zhuǎn)換。
創(chuàng)建管道
我們可以使用 Angular CLI 的 generate 命令权逗，創(chuàng)建一個管道：
ng generate pipe sort
輸出結(jié)果：
CREATE src/app/sort.pipe.spec.ts (179 bytes)
CREATE src/app/sort.pipe.ts (213 bytes)
UPDATE src/app/app.module.ts (581 bytes)
Angular CLI 為我們創(chuàng)建了管道文件sort.pipe.ts及其單元測試文件ort.pipe.spec.ts. 還要注意到美尸，Angular CLI 對 app.module.ts 文件進行了更新冤议，把剛剛創(chuàng)建的管道，添加到主模塊的 declarations 屬性中师坎，完成了注冊恕酸。
…
@NgModule({
declarations: [
…
SortPipe
],
imports: [
BrowserModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
一個管道就是一個裝飾了 @Pipe 的 TypeScript 類，并實現(xiàn)了 PipeTransform 接口胯陋。@Pipe 的 name 屬性是必需屬性蕊温，用來設置管道的名稱。實現(xiàn) PipeTransform 接口的 transform 方法遏乔，完成對數(shù)據(jù)的轉(zhuǎn)換工作义矛。
src/app/sort.pipe.ts
import { Pipe, PipeTransform } from '@angular/core’;
@Pipe({
name: ‘sort’
})
export class SortPipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
return null;
}
}
參數(shù)說明：
-
value，需要進行轉(zhuǎn)換的數(shù)據(jù) -
args盟萨，可選的參數(shù)列表凉翻，參數(shù)之間使用逗號分割
調(diào)整接口數(shù)據(jù)類型
因為我們創(chuàng)建的管道，需要對圖書數(shù)組對象進行操作捻激，所以制轰，要對transform 方法中的一些數(shù)據(jù)的類型進行調(diào)整：
- 把參數(shù)
value的數(shù)據(jù)類型改為Book[]. - 把參數(shù)
args的數(shù)據(jù)類型改為string，并移除參數(shù)前面的三個點胞谭。 - 把返回值的數(shù)據(jù)類型改為
Book[].
調(diào)整后的 transform 方法如下所示：
transform(value: Book[], args: string): Book[] {
return null;
}
實現(xiàn)排序邏輯
接下來垃杖，我們在 transform 方法中，對圖書數(shù)組中的圖書丈屹，按照 args 指定的屬性進行排序调俘。
transform(value: Book[], args: string): Book[] {
if (value) {
return value.sort((a: Book, b: Book) => {
if (a[args] < b[args]) {
return -1;
} else if (b[args] < a[args]) {
return 1;
}
return 0;
});
}
return [];
}
按價格進行排序
我們把 ngFor 和 sort 管道進行結(jié)合，先把圖書列表中的圖書按價格進行排序旺垒，然后再把排序后的結(jié)果脉漏，顯示到頁面上。
<ul>
<li *ngFor="let book of books | sort:'price'">{{book.name}}</li>
</ul>
頁面效果
源代碼
src/app/sort.pipe.ts
import { Pipe, PipeTransform } from '@angular/core’;
import { Book } from "./book/book”;
@Pipe({
name: ‘sort’
})
export class SortPipe implements PipeTransform {
transform(value: Book[], args: string): Book[] {
if (value) {
return value.sort((a: Book, b: Book) => {
if (a[args] < b[args]) {
return -1;
} else if (b[args] < a[args]) {
return 1;
}
return 0;
});
}
return [];
}
}
src/app/book/book.ts
export interface Book {
id: number,
name: string,
price: number
}
src/app/app.component.ts
import { Component } from '@angular/core’;
import { Book } from "./book/book”;
@Component({
selector: 'app-root’,
templateUrl: './app.component.html’,
styleUrls: ['./app.component.css’]
})
export class AppComponent {
title = 'Hello Angular 10’;
bookName = "《三體》”;
books: Book[] = [
{id: 1, name: '《三體》', price: 50.00},
{id: 2, name: '《黑暗森林》', price: 40.00},
{id: 3, name: '《死神永生》', price: 60.00},
{id: 4, name: '《超新星紀元》', price: 35.00}
];
specialBook = "《超新星紀元》”;
onLike(event) {
if (event) {
window.alert(`我喜歡 ${this.bookName}袖牙。`);
} else {
window.alert(`我不再喜歡 ${this.bookName}。`);
}
}
}
src/app/app.component.html
<p>{{'hello angular 10' | uppercase}}</p>
<p>{{'HELLO ANGULAR 10' | lowercase}}</p>
<app-book [name]="bookName" (liked)="onLike($event)"></app-book>
<h4>更多圖書</h4>
<ul>
<li *ngFor="let book of books | sort:'price'">{{book.name}}</li>
</ul>
<h4>今日推薦</h4>
<div [ngSwitch]=“specialBook”>
<p *ngSwitchCase="'《三體》'">{{specialBook}}</p>
<p *ngSwitchCase="'《超新星紀元》'">{{specialBook}}</p>
<p *ngSwitchCase="'《黑暗森林》'">{{specialBook}}</p>
<p *ngSwitchDefault="'《死神永生》'">{{specialBook}}</p>
</div>
