我们在上一篇文章中，了解了什么是 Angular 管道，以及如何使用 Angular 提供的一些常用管道。本文将进一步深入探讨如何创建一个 Angular 管道，实现对数据的自定义转换。
创建管道
我们可以使用 Angular CLI 的 generate 命令，创建一个管道：
ng generate pipe sort
输出结果：
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 为我们创建了管道文件sort.pipe.ts及其单元测试文件ort.pipe.spec.ts. 还要注意到，Angular CLI 对 app.module.ts 文件进行了更新，把刚刚创建的管道，添加到主模块的 declarations 属性中，完成了注册。
…
@NgModule({
declarations: [
…
SortPipe
],
imports: [
BrowserModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
一个管道就是一个装饰了 @Pipe 的 TypeScript 类，并实现了 PipeTransform 接口。@Pipe 的 name 属性是必需属性，用来设置管道的名称。实现 PipeTransform 接口的 transform 方法，完成对数据的转换工作。
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;
}
}
参数说明：
-
value，需要进行转换的数据 -
args，可选的参数列表，参数之间使用逗号分割
调整接口数据类型
因为我们创建的管道，需要对图书数组对象进行操作，所以，要对transform 方法中的一些数据的类型进行调整：
- 把参数
value的数据类型改为Book[]. - 把参数
args的数据类型改为string，并移除参数前面的三个点。 - 把返回值的数据类型改为
Book[].
调整后的 transform 方法如下所示：
transform(value: Book[], args: string): Book[] {
return null;
}
实现排序逻辑
接下来，我们在 transform 方法中，对图书数组中的图书，按照 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 管道进行结合，先把图书列表中的图书按价格进行排序，然后再把排序后的结果，显示到页面上。
<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>
