Angular 中的管道（Pipes）是什么？

Question

Accepted Answer

**管道**使用 `|` 操作符直接在模板中**用于显示**转换数据。它们让你格式化值（日期、货币、文本），而不需要改变底层数据或在组件中编写转换逻辑。 ## 使用内置管道 ```html

``` 左侧的值被传递给管道；参数跟在冒号后面（`date:'longDate'`）。 ## 链接管道 ```html

``` ## async 管道——一个突出的例子 ```html

``` `async` 特别重要：它订阅一个 Observable（例如 HTTP 结果），渲染发出的值，并在组件被销毁时**自动取消订阅**——无需手动订阅管理就能防止内存泄漏。 ## 创建自定义管道 ```ts import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "truncate" }) export class TruncatePipe implements PipeTransform { transform(value: string, limit = 20): string { return value.length > limit ? value.slice(0, limit) + "…" : value; } } // usage: {{ longText | truncate:50 }} ``` ## 纯管道与非纯管道 ```text Pure (default): re-runs only when the input REFERENCE changes → efficient (cached) Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering) ``` 纯管道被缓存，仅在输入更改时重新计算——这使得它们性能高效。 ## 为什么这很重要管道保持数据格式化声明式，放在模板中应该放的地方，与组件逻辑分离——可重用、可链接，以及（在纯管道时）高效。内置管道覆盖常见格式化，自定义管道处理应用特定的转换，`async` 管道是显示 Observable 数据的习语化、无泄漏的方式——这是你在 Angular 中会不断使用的模式。