Angular Pipes：数据变换与格式化

天涯学馆

于 2024-06-18 23:57:00 发布

阅读量851

点赞数 12

分类专栏： Web大前端文章标签： angular.js 前端 javascript

本文链接：https://blog.csdn.net/a1215383843/article/details/139786529

版权

Web大前端专栏收录该内容

137 篇文章 4 订阅

订阅专栏

Angular中的Pipes是一种用于在模板中转换数据的简单方法，它们可以用来格式化输出文本、日期、数字等，使得数据显示更加符合用户习惯或特定需求。Angular内置了一些常用的Pipes，并且支持自定义Pipes来满足特定的数据转换需求。下面绍几种常见的Angular Pipes及其用途：

内置Pipes

1. DatePipe

用途：用于格式化日期。例如，将JavaScript Date对象转换成用户友好的字符串格式。
示例：{{ date | date: 'short' }} 将显示一个短日期格式，如"12/22/2023"。

CurrencyPipe

用途：格式化货币值，支持指定货币符号和小数位数。
示例：{{ amount | currency:'USD':true:'1.2-2'}} 将金额格式化为美元，显示符号并保留两位小数。

DecimalPipe

用途：格式化数字，支持四舍五入和小数位数控制。
示例：{{ value | number:'1.2-2'}} 保留一位整数和两位小数，不足补0。

PercentPipe

用途：格式化百分比数值。
示例：{{ percent | percent:'1.2-2'}} 显示百分比，保留一位整数和两位小数。

AsyncPipe

用途：用于异步数据流，如Observables，自动订阅并处理数据，当数据变化时自动更新视图。
示例：{{ observableData | async }} 直接在模板中展示Observable的结果。

JsonPipe

用途：将JavaScript对象转换成JSON字符串。
示例：{{ complexObject | json }} 将对象转换成易于阅读的JSON格式。

自定义Pipes

除了内置Pipes，开发者还可以根据需要创建自定义Pipes。创建自定义Pipe通常涉及以下步骤：

创建Pipe类：使用@Pipe装饰器标记Pipe类，并实现transform方法，该方法接收输入值并返回转换后的值。
注册Pipe：在模块的declarations数组中注册Pipe。
使用Pipe：在模板中通过管道符|使用自定义Pipe，如{{ data | customPipe }}。

例如，创建一个简单的自定义Pipe来将文本转换为大写：

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

@Pipe({ name: 'toUppercase' })
export class ToUppercasePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}
然后在模块中注册并使用这个Pipe：

typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ToUppercasePipe } from './to-uppercase.pipe';

@NgModule({
  declarations: [
    AppComponent,
    ToUppercasePipe
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在模板中使用：

<p>{{ 'hello world' | toUppercase }}</p>

Angular Pipes是模板中处理和展示数据的强大工具，它们使数据格式化变得简单且易于维护。

管道的参数和链式使用

Angular Pipes不仅可以单独使用，还支持传递参数以定制转换行为，并且能够链式调用多个Pipe来实现复杂的转换逻辑。

参数传递

许多内置Pipe接受参数来控制它们的行为。例如，date Pipe可以通过不同的参数格式化日期：

{{ dateValue | date:'medium' }}

在这个例子中，'medium' 是传递给 date Pipe 的参数，用于指定日期的显示格式。

自定义Pipe同样可以接收参数。在自定义Pipe的 transform 方法中，可以在参数列表中声明所需的参数：

@Pipe({ name: 'truncateText' })
export class TruncateTextPipe implements PipeTransform {
  transform(value: string, limit: number = 10, trail: string = '...'): string {
    if (value.length <= limit) {
      return value;
    } else {
      return value.substring(0, limit) + trail;
    }
  }
}

在这个自定义Pipe中，limit 和 trail 是可选参数，用于控制截断的长度和末尾追加的字符串。

链式使用Pipe

Pipe可以通过管道符连续调用来实现数据的连续转换。例如，先将一个数字格式化为货币，然后再转换为大写：

{{ amount | currency:'USD':true:'1.2-2' | toUppercase }}

在这个例子中，amount 先通过 currency Pipe 转换为美元格式，之后通过 toUppercase Pipe 转换为大写字符串。

注意事项

性能考量：虽然Pipes非常方便，但过度使用或不当使用（如在每个变更检测周期都执行复杂计算的Pipe）可能会对性能产生负面影响。
纯Pipe与非纯Pipe：默认情况下，自定义Pipe被标记为纯（pure），这意味着只有当其输入值发生变化时，Pipe才会重新执行。对于那些结果不依赖于外部状态的Pipe，应保持为纯Pipe。如果Pipe的输出依赖于全局状态或外部服务，应将其标记为非纯（impure），通过在@Pipe装饰器中设置pure: false。
国际化（i18n）：在处理日期、数字和货币等格式化时，考虑到国际化的需要，应使用支持i18n的库或Angular的国际化功能来确保应用的全球化兼容性。

2500G计算机入门到高级架构师开发资料超级大礼包免费送！