[angular] 第1875天 请说说在Angular中有哪些不同类型的过滤器？

[haizhilin2013]

trafficstars

第1875天 请说说在Angular中有哪些不同类型的过滤器？

3+1官网

我也要出题

[llccing]

在Angular中，过滤器（Filters）通常用于转换和格式化数据，以便在视图中显示。需要注意的是，AngularJS（Angular 1.x）中有内置的过滤器，而在现代的Angular（Angular 2及以后的版本）中，过滤器的概念被管道（Pipes）所取代。

以下是一些在现代Angular中常用的管道类型：

1. 内置管道

Angular 提供了一些常用的内置管道，帮助开发者进行常见的数据转换和格式化任务：

• DatePipe：用于格式化日期和时间。

  {{ today | date:'yyyy-MM-dd' }}
  

• UpperCasePipe：将字符串转换为大写。

  {{ 'hello' | uppercase }}
  

• LowerCasePipe：将字符串转换为小写。

  {{ 'HELLO' | lowercase }}
  

• CurrencyPipe：格式化数字为货币格式。

  {{ 1234.56 | currency:'USD' }}
  

• DecimalPipe：格式化数字为小数格式。

  {{ 1234.56 | number:'1.2-2' }}
  

• PercentPipe：格式化数字为百分比格式。

  {{ 0.1234 | percent }}
  

• JsonPipe：将对象转换为 JSON 字符串。

  <pre>{{ object | json }}</pre>
  

• SlicePipe：用于数组或字符串的切片操作。

  {{ [1, 2, 3, 4, 5] | slice:1:3 }}
  

2. 自定义管道

除了内置的管道，开发者还可以创建自定义管道，以满足特定的需求。以下是一个自定义管道的示例：

假设我们需要一个管道，将文本的每个单词的首字母大写：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'capitalize'})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    return value.replace(/\b\w/g, first => first.toLocaleUpperCase());
  }
}

在模块中声明这个管道：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CapitalizePipe } from './capitalize.pipe';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    CapitalizePipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在模板中使用这个自定义管道：

{{ 'hello world' | capitalize }}

3. 异步管道

• AsyncPipe：处理异步数据流（如 Promise 或 Observable），自动订阅并解析其值。

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

4. 组合管道

管道可以组合使用，以实现复杂的数据转换：

{{ (1234.56 | currency:'USD') | uppercase }}

总结来说，Angular中的管道（Pipes）是非常强大的工具，允许开发者轻松地转换和格式化数据，以便在视图中显示。内置管道涵盖了大多数常见的需求，而自定义管道则提供了灵活性，满足特定的应用需求。