创建自定义的 Angular 管道

2022-05-13 本文已影响0人品品下午茶

我们在上一篇文章中，了解了什么是 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>