在 Angular 开发中，管道（Pipe）是一个核心且实用的特性，它能帮助我们在模板中简洁地转换数据格式，无需修改组件逻辑即可实现数据的格式化、过滤、转换等操作。本文将从管道的基础概念入手，详解 Angular 内置的常用管道（DatePipe、UpperCasePipe），并手把手教你创建自定义管道，让你快速掌握管道的使用技巧。
一、Angular 管道是什么？
管道本质上是一个纯函数（默认），它接收输入值，经过一系列处理后返回转换后的值。在 Angular 模板中，通过|符号（管道操作符）调用，语法格式为：
{{ 输入值 | 管道名: 参数1: 参数2:... }}管道的核心优势在于复用性和简洁性：一个管道可以在多个组件模板中调用，避免重复编写数据转换逻辑；同时模板中的写法直观易懂，降低代码冗余。
二、常用内置管道：开箱即用的便捷工具
Angular 内置了数十种管道，覆盖了日常开发中常见的数据转换场景，这里重点讲解最常用的DatePipe（日期格式化）和UpperCasePipe（大写转换）。
2.1 UpperCasePipe：文本转大写
UpperCasePipe用于将字符串全部转换为大写，无需传入参数，使用极其简单。
基本使用
组件类定义字符串变量：
// app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { message: string = 'hello angular pipe!'; }模板中调用管道：
<!-- app.component.html --> <p>原始文本：{{ message }}</p> <p>大写文本：{{ message | uppercase }}</p>输出结果
原始文本：hello angular pipe! 大写文本：HELLO ANGULAR PIPE!2.2 DatePipe：日期格式化
DatePipe是处理日期的核心管道，支持多种日期 / 时间格式，可通过参数指定输出样式，参数格式遵循 Angular 的日期格式规则（也兼容 Unicode CLDR 格式）。
基本语法
{{ 日期值 | date: '格式字符串': '时区': '语言代码' }}- 格式字符串：可选，默认值为
medium（如Sep 1, 2025, 12:30:45 PM）； - 时区：可选，如
GMT+8、Asia/Shanghai； - 语言代码：可选，如
zh-CN（中文）、en-US（英文）。
常用格式示例
组件类定义日期变量：
// app.component.ts export class AppComponent { currentTime: Date = new Date(); // 当前时间 birthday: Date = new Date(2000, 5, 18); // 自定义日期（月份从0开始，5代表6月） }模板中调用不同格式的 DatePipe：
<!-- app.component.html --> <!-- 默认格式（medium） --> <p>默认日期格式：{{ currentTime | date }}</p> <!-- 短日期格式 --> <p>短日期：{{ currentTime | date: 'shortDate' }}</p> <!-- 自定义格式（年-月-日 时:分:秒） --> <p>自定义格式：{{ currentTime | date: 'yyyy-MM-dd HH:mm:ss' }}</p> <!-- 指定时区和语言（中文） --> <p>中文+上海时区：{{ birthday | date: 'yyyy年MM月dd日': 'Asia/Shanghai': 'zh-CN' }}</p>输出结果（示例）
默认日期格式：Jan 4, 2026, 10:20:30 AM 短日期：1/4/26 自定义格式：2026-01-04 10:20:30 中文+上海时区：2000年06月18日DatePipe 常用格式符
| 格式符 | 说明 | 示例 |
|---|---|---|
| yyyy | 4 位年份 | 2026 |
| MM | 2 位月份（补 0） | 01 |
| dd | 2 位日期（补 0） | 04 |
| HH | 24 小时制小时（补 0） | 10 |
| mm | 分钟（补 0） | 20 |
| ss | 秒（补 0） | 30 |
| EEEE | 星期全称（中文） | 星期日 |
三、自定义管道：满足个性化需求
当内置管道无法满足业务需求时（比如金额格式化、手机号脱敏、数组过滤等），我们可以创建自定义管道。自定义管道需要遵循以下步骤：
3.1 步骤 1：创建管道文件
使用 Angular CLI 快速创建管道（以 “手机号脱敏管道” 为例）：
ng generate pipe pipes/phone-mask # 简写：ng g pipe pipes/phone-mask执行后会生成两个文件：phone-mask.pipe.ts（管道逻辑）和phone-mask.pipe.spec.ts（测试文件），同时管道会自动注册到模块的declarations数组中。
3.2 步骤 2：实现管道逻辑
自定义管道需要实现PipeTransform接口，并重写transform方法（核心逻辑）。transform方法接收两个参数：
value：需要转换的原始值；args：可选参数，模板中传入的参数列表。
修改phone-mask.pipe.ts：
// phone-mask.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; // @Pipe装饰器：定义管道名称（模板中使用的名称） @Pipe({ name: 'phoneMask' // 管道名：phoneMask }) export class PhoneMaskPipe implements PipeTransform { /** * 手机号脱敏转换 * @param value 原始手机号（如13812345678） * @param args 可选参数：脱敏占位符（默认*） * @returns 脱敏后的手机号（如138****5678） */ transform(value: string, args: string = '*'): string { // 校验：非11位手机号直接返回原数据 if (!value || value.length !== 11 || !/^1[3-9]\d{9}$/.test(value)) { return value; } // 脱敏逻辑：保留前3位和后4位，中间4位替换为占位符 return value.replace(/(\d{3})\d{4}(\d{4})/, `$1${args.repeat(4)}$2`); } }3.3 步骤 3：在模板中使用自定义管道
组件类定义手机号变量：
// app.component.ts export class AppComponent { phone1: string = '13812345678'; // 合法手机号 phone2: string = '123456'; // 非法手机号 }模板中调用自定义管道：
<!-- app.component.html --> <p>原始手机号1：{{ phone1 }}</p> <p>脱敏手机号1（默认*）：{{ phone1 | phoneMask }}</p> <p>脱敏手机号1（自定义#）：{{ phone1 | phoneMask: '#' }}</p> <p>非法手机号：{{ phone2 | phoneMask }}</p>3.4 步骤 4：查看输出结果
原始手机号1：13812345678 脱敏手机号1（默认*）：138****5678 脱敏手机号1（自定义#）：138####5678 非法手机号：1234563.5 自定义管道进阶：多参数示例
如果需要传入多个参数（比如 “金额格式化管道”，支持指定小数位数和货币符号），修改transform方法即可：
// money-format.pipe.ts @Pipe({ name: 'moneyFormat' }) export class MoneyFormatPipe implements PipeTransform { // value：金额数字；decimalDigits：小数位数；symbol：货币符号 transform(value: number, decimalDigits: number = 2, symbol: string = '¥'): string { if (isNaN(value)) return '0.00'; // 格式化数字为指定小数位数 const formattedNum = value.toFixed(decimalDigits); // 添加货币符号 return `${symbol}${formattedNum}`; } }模板中调用（多参数用冒号分隔）：
<p>原始金额：{{ 1234.567 }}</p> <p>默认格式化：{{ 1234.567 | moneyFormat }}</p> <p>保留1位小数+美元：{{ 1234.567 | moneyFormat: 1: '$' }}</p>输出：
原始金额：1234.567 默认格式化：¥1234.57 保留1位小数+美元：$1234.6四、管道的核心特性：纯管道与非纯管道
默认情况下，Angular 管道是纯管道（Pure Pipe），只有当输入值（value或args）的引用发生变化时，管道才会重新执行transform方法。这意味着：
- 对于基本类型（字符串、数字、布尔）：值变化时触发重新计算；
- 对于引用类型（对象、数组）：只有引用地址变化（如重新赋值）才触发，修改对象属性 / 数组元素不会触发。
如果需要监听引用类型的内部变化（比如实时过滤数组），可以将管道设置为非纯管道（Impure Pipe）：
@Pipe({ name: 'filterArray', pure: false // 非纯管道 })⚠️ 注意：非纯管道会在每次变更检测时执行，可能影响性能，需谨慎使用！
五、总结
Angular 管道是模板中数据转换的 “利器”：
- 内置管道：
UpperCasePipe、LowerCasePipe、DatePipe、CurrencyPipe等能满足大部分基础场景，无需重复造轮子； - 自定义管道：通过实现
PipeTransform接口，可快速封装个性化的转换逻辑，提升代码复用性； - 性能注意：优先使用纯管道，非纯管道需评估性能影响。
掌握管道的使用和自定义技巧，能让你的 Angular 模板更简洁、逻辑更清晰，大幅提升开发效率。快去尝试用管道优化你的项目吧！
)