请说说在Angular中什么是管道？有哪些用途？

# Angular管道(Pipe)详解

## 什么是管道

管道是Angular中用于转换数据显示的简单函数。它们接受输入值并返回转换后的值，通常用在模板表达式中，通过`|`符号调用。

```typescript
// 示例：日期管道
{{ today | date:'yyyy-MM-dd' }}

管道的核心用途

1. 数据格式化

• 日期格式化：date管道

{{ today | date:'fullDate' }}  // 输出：2023年11月15日星期三

• 货币格式化：currency管道

{{ price | currency:'CNY':'symbol':'1.2-2' }}  // 输出：¥100.00

• 数字格式化：number管道

{{ pi | number:'1.2-2' }}  // 输出：3.14

2. 数据转换

• 大小写转换：uppercase/lowercase管道

{{ 'Angular' | uppercase }}  // 输出：ANGULAR

• JSON格式化：json管道

{{ user | json }}  // 输出格式化后的JSON

3. 数据过滤

• 数组过滤：自定义管道示例

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    
    return items.filter(item => 
      item.name.toLowerCase().includes(searchText.toLowerCase())
    );
  }
}

内置管道类型

Angular提供的内置管道：

1. 常用管道

   • DatePipe
   • UpperCasePipe
   • LowerCasePipe
   • CurrencyPipe
   • DecimalPipe
   • PercentPipe

2. 高级管道

   • JsonPipe
   • SlicePipe
   • AsyncPipe (处理异步数据流)

创建自定义管道

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

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

使用方式：

{{ 'hello' | reverse }}  // 输出：olleh

管道的重要特性

1. 纯管道(Pure Pipe)

   • 默认类型
   • 仅在输入值变化时执行
   • 性能优化好

2. 非纯管道(Impure Pipe)

   • 每次变更检测都会执行
   • 需要显式声明

   @Pipe({
     name: 'filter',
     pure: false
   })
   

管道使用最佳实践

1. 链式调用

{{ data | pipe1 | pipe2 }}

2. 参数传递

{{ value | pipe:arg1:arg2 }}

3. 性能考虑
   • 避免在非纯管道中执行复杂操作
   • 对于大数据集考虑使用纯管道

实际应用场景

1. 国际化(i18n)

   • 日期/货币的本地化显示

2. 数据预处理

   • 从API获取数据后的格式化

3. 视图逻辑封装

   • 将显示逻辑封装在管道中保持组件简洁

与过滤器的区别（对比Vue）

特性	Angular管道	Vue过滤器
异步支持	有(AsyncPipe)	无
链式调用	支持	支持
参数传递	多参数支持	单参数
性能优化	纯/非纯管道	无明确区分

常见问题解决方案

1. 管道不更新问题

   • 检查是否为纯管道
   • 确保输入引用变化

2. 性能问题

   • 避免在模板中使用复杂管道计算
   • 考虑使用Memoization技术

3. 测试策略

   it('should reverse string', () => {
     const pipe = new ReversePipe();
     expect(pipe.transform('hello')).toEqual('olleh');
   });
   

总结

Angular管道是模板表达式的强大工具，它们：

• 保持组件专注于业务逻辑
• 提高模板的可读性