Angular Academy · 课时

使用内置管道

Q: 「使用内置管道」这节课中我会学到什么？

使用管道格式化日期、数字和文本。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用管道格式化日期、数字和文本。

使用内置管道 是 CoddyKit 上的免费 Angular Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

什么是管道

管道会直接在模板中转换数据，以便显示。您先写入一个值，再写入管道字符 |，最后写入管道名称。

管道非常适合格式化日期、数字、货币和文本，无需编写额外的组件逻辑。

管道语法

基本形式是 {{ value | pipeName }}。Angular 会将值传入管道，并渲染转换后的结果。

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

uppercase 和 lowercase 管道

uppercase 和 lowercase 会改变字符串的大小写。它们简单易用，常用于标签和标题。

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

date 管道

date 管道会将 Date 对象或时间戳格式化为易读的字符串。默认情况下，它使用中等日期格式。

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

格式化日期

您可以向 date 管道传入格式字符串，例如 "shortDate"、"fullDate"，或 "yyyy-MM-dd" 这样的自定义模式。

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

currency 管道

currency 管道会将数字格式化为货币金额。默认使用 USD，但您也可以传入货币代码。

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

number 和 percent 管道

number 管道使用数字选项格式化数字，percent 则将值显示为百分比。

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

理解 digitsInfo

number 管道接受一个 digitsInfo 字符串：minIntegerDigits.minFractionDigits-maxFractionDigits。例如，"1.2-2" 始终显示两位小数。

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

json 管道

json 管道会将任意对象序列化为 JSON 字符串。它主要用于调试模板，让您查看数据的结构。

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

slice 管道

slice 管道会返回数组或字符串的子集，类似于 JavaScript 的 slice。它适合用于截短列表。

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

在独立组件中导入管道

在独立组件中，您必须导入所使用的管道，例如从 @angular/common 导入 DatePipe 或 CurrencyPipe。

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

快速检查

测试您对内置管道的理解。

回顾

您学习了核心内置管道：uppercase、lowercase、date、currency、number、percent、json 和 slice。

管道让格式化逻辑保留在模板中，使模板整洁且具有声明式特点。接下来，您将学习串联管道并向管道传递参数。

常见问题解答

「使用内置管道」课时是免费的吗？

是的 — 「使用内置管道」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「使用内置管道」这节课中我会学到什么？

使用管道格式化日期、数字和文本。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「使用内置管道」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy