Angular 内置管道有哪些？

Question

Angular 内置管道包括:

1. DatePipe : 格式化日期，可以自定义日期格式，如 'shortDate' 、 'fullDate' 等。
2. CurrencyPipe : 格式化数字为货币形式，支持自定义货币符号和小数位数。
3. DecimalPipe : 用于格式化数字，可以设置小数位数和千位分隔符。
4. PercentPipe : 将数字转换为百分比，通常乘以 100 并添加百分号。
5. JsonPipe : 将 JavaScript 对象转换为 JSON 字符串，方便调试。
6. SlicePipe : 从数组或字符串中提取指定范围的元素，类似于 JavaScript 的 slice() 方法。
7. AsyncPipe : 自动订阅和处理 Observable 或 Promise，简化异步数据的处理。

这里是每个内置管道的使用示例：

1. DatePipe

   {{ currentDate | date:'fullDate' }}

输出： Saturday, September 29, 2024

2. CurrencyPipe

   {{ amount | currency:'USD':'symbol':'1.2-2' }}

输出： $1,234.56

3. DecimalPipe

   {{ pi | number:'1.1-2' }}

输出： 3.14

4. PercentPipe

   {{ fraction | percent:'1.0-1' }}

输出： 50.0% （如果 fraction 的值是 0.5 ）

5. JsonPipe

   {{ user | json }}

输出： {"name":"John","age":30}

6. SlicePipe

   {{ items | slice:1:3 }}

输出： [item2, item3] （如果 items 是一个数组）

7. AsyncPipe

   <div *ngIf="dataObservable | async as data">
       {{ data }}
   </div>

自动处理 dataObservable 的异步值。