管道常用于格式化日期、数字和字符串，我们也可以根据各种需求对它们进行定制。在这篇文章中，我们将解释如何在 Angular 中使用管道，并提供示例和相关输出供大家参考。
前置知识：
为了理解本文，您应该掌握以下知识：
目录
- Angular 中的管道
- Angular 中常用的管道
- DatePipe（日期管道）
- UpperCasePipe（大写管道）
- LowerCasePipe（小写管道）
- CurrencyPipe（货币管道）
- DecimalPipe（小数管道）
- PercentPipe（百分比管道）
- SlicePipe（切片管道）
- JsonPipe（JSON管道）
- TitleCasePipe（标题格式管道）
- KeyValuePipe（键值对管道）
- 总结
Angular 中的管道是一项强大的功能，它可以直接在模板中转换数据。它们接收数据作为输入，并将其转换为所需的输出。Angular 附带了几种内置管道，例如 DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe 和 DecimalPipe。
语法：
{{ today | date:‘fullDate‘ }}
Angular 中常用的管道
以下是 Angular 提供的内置且最常用的管道。
- DatePipe: 根据区域设置规则格式化日期值
- UpperCasePipe: 将文本转换为大写
- LowerCasePipe: 将文本转换为小写
- CurrencyPipe: 将数字格式化为货币。
- DecimalPipe: 将数字格式化为小数。
- PercentPipe: 将数字格式化为百分比。
- SlicePipe: 对字符串或数组进行切片，并返回一个新的子字符串或子数组。
- JsonPipe: 将值转换为其 JSON 字符串表示形式。
- TitleCasePipe: 将每个单词的首字母大写。
- KeyValuePipe: 此管道用于将对象或 Map 转换为键值对数组。
创建应用的步骤
#### 步骤 1：安装 Angular CLI
打开终端并运行：
npm install -g @angular/cli
#### 步骤 2：创建一个新的 Angular 项目
ng new pipes
#### 步骤 3：进入您的项目目录
cd pipes
项目结构：
!11文件夹结构
package.json 文件中更新的依赖项如下：
"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/platform-server": "^18.0.0",
"@angular/router": "^18.0.0",
"@angular/ssr": "^18.0.0",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
下面我们提供了上述列表中提到的每个管道的语法、示例和输出。
DatePipe（日期管道）
DatePipe 用于根据区域设置规则格式化日期值。
语法：
****{{ currentDate | date: ‘fullDate‘ }}
****
示例：在 app.component.ts 和 app.component.html 文件中添加以下代码。下面的 HTML 代码包含用于 currentDate 的管道。TS 文件包含关于组件是独立组件的数据，imports 包含为特定组件导入的内容。
HTML
CODEBLOCK_9f48456a
JavaScript
CODEBLOCK_7954439c
输出
!11DatePipe 的输出
UpperCasePipe（大写管道）
此 UpperCasePipe 用于将文本转换为大写。
语法：
****{{ ‘hello world‘ | uppercase }}
****
示例： 在 app.component.ts 和 app.component.html 文件中添加以下代码。下面的 HTML 代码包含用于 Uppercase 的管道。TS 文件包含关于组件是独立组件的数据，imports 包含为特定组件导入的内容。
HTML
CODEBLOCK_1dcbdc46
JavaScript
// app.component.ts
import { Component } from ‘@angular/core‘;
import { RouterOutlet } from ‘@angular/router‘;
import { CommonModule } from ‘@angular/common‘;
@Component({
selector: ‘app-root‘,
standalone: true,
imports: [RouterOutlet, CommonModule],