角管：綜合指南

首頁 > 程式設計 > 角管：綜合指南

角管：綜合指南

發佈於2024-11-06

Angular 中的

Angular Pipes: A Comprehensive guide

Pipes 是简单的函数，用于在不修改底层数据的情况下转换模板中的数据。管道接收一个值，对其进行处理，然后返回格式化或转换后的输出。它们通常用于格式化日期、数字、字符串，甚至数组或对象。

它们允许您直接在视图中以更具可读性或相关性的格式格式化和显示数据，而无需更改底层数据模型。

使用管道有助于保持代码干净和可读。您可以将该逻辑封装在 pipe 中，然后可以在应用程序的不同部分中重用，而不是在模板或组件中编写复杂的逻辑。
例如，如果您正在开发一个博客平台，用户可以在其中查看文章的发布日期。日期需要以用户友好的格式显示，例如“2024 年 8 月 31 日”，而不是原始格式“2024–08–31T14:48:00.000Z”。借助 pipes，您可以在模板中使用 Angular 内置的 DatePipe，而不是在组件中手动格式化日期，这样会使代码变得混乱并降低可读性。

Published on: {{ article.publishDate | date:'longDate' }}

要应用管道，请在模板表达式中使用管道 运算符 (|)，如上面的代码示例所示。

内置管道

Angular 附带了几个涵盖常见任务的内置管道（DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe、AsyncPipe、JsonPipe、 等）。知道如何使用这些可以让你的代码更干净、更高效。

示例：

{{ user | json }}
Price: {{ product.price | currency:'USD' }}
{{ user.name | uppercase }}

价格：{{ 产品.价格 |货币：'USD' }}

参数化管道

许多 Angular 管道接受参数来自定义其行为。

要指定参数，请在管道名称后添加冒号 (:) 和参数值

一些管道接受多个参数，这些参数由附加冒号分隔。

参数可以是可选或必需。假设您有一个格式化货币的自定义管道，并要求您指定货币类型作为参数。如果未提供此参数，管道可能无法正确格式化该值。

The product price is {{ price | customCurrency:'USD' }}

1.带参数的 DatePipe

Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}

这将日期格式设置为“2024 年 8 月 31 日，下午 2:48:00”。

2.带参数的CurrencyPipe

Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}

这将价格格式化为“€1,235”（四舍五入到没有小数位）。

链接管道

您可以将多个管道链接在一起以实现复杂的转换。

{{ article.content | slice:0:100 | uppercase }}

这将分割 article.content 的前 100 个字符并将它们转换为大写。

定制管道

有时，内置管道可能无法满足您的特定需求，您需要创建自定义管道来处理特定逻辑。以下是您可以如何做到的。

例子：

在下面的示例中，我们将创建一个管道，将问候语添加到诸如“Hello, Alice!”之类的名称中

运行以下命令生成新管道：

ng generate pipe greet

现在，让我们修改 src/app 目录中的greet.pipe.ts 文件以包含管道逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

管道准备好后，您可以在模板中使用它。

{{ 'Alice' | greet }}

创建参数化自定义管道

现在我们要自定义问候语，这样您就可以说“嗨，爱丽丝！”或“欢迎，爱丽丝！”取决于您传递给管道的内容。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

transform 方法现在有第二个参数，greeting。如果没有提供问候语，则默认为“Hello”。

现在您可以在模板中自定义问候语。

{{ 'Alice' | greet:'Hi' }}
{{ 'Bob' | greet:'Welcome' }}

纯净管道与不纯净管道

1.纯管道
默认情况下，所有 Angular 管道都是 pure。 纯管道仅在输入数据（如数字或字符串）或对对象的引用（如数组或日期）更改时被调用。这使得纯管道高效且高性能，因为管道不会不必要地运行。

但是，如果您的数据更复杂，例如项目数组，Angular 可能不会注意到数组内部的更改（例如添加新项目），因为对数组的引用没有更改。

除非必要，请保持管道纯净以避免不必要的重新渲染并保持性能。

例子：

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

在您的模板中：

{{ item.name }} - {{ item.price | formatPrice }}

如果您将新商品添加到正在促销的 items 数组中，您可能希望它出现在列表中。但是，如果您只是将新项目推入数组，列表可能不会更新，因为数组引用没有更改。

2、管道不纯

另一方面，不纯管道每次 Angular 执行变化检测周期时都会被调用。但是，由于它们运行如此频繁，因此可能会减慢您的应用程序的速度。

例子：

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

在您的模板中：