Angular 常用管道（过滤器）汇总

进入博客正题前，让我们先复习一下angular 和angular.js两者的区别：

        Angular是一个开发框架，而Angular.js是Angular的旧版本。Angular是一个完全重写的框架，它引入了很多新的特性和改进，以提高性能和开发体验。相比之下，Angular.js是一个较旧的版本，已经不再维护和更新。因此，建议使用Angular来进行新的项目开发。

        然后让我们复习一下管道和过滤器：

        在Angular中，管道（Pipe）是用来对数据进行转换、格式化或过滤的工具，它可以在模板中使用，用于对数据进行处理并显示在页面上。管道可以接受一个或多个参数，并返回处理后的数据。而过滤器（Filter）是AngularJS中的概念，用于在视图中对数据进行过滤和排序。过滤器可以用在表达式中，对数据进行处理后再显示在页面上。在Angular中，过滤器已经被废弃，取而代之的是管道。因此，管道是Angular中用来替代过滤器的概念，更加强大和灵活。

        Angular提供了一些内置的过滤器(pipe)，在angular.js和angular中可以使用：

过滤器(pipe)名称	描述	示例
currency(CurrencyPipe)	将数字格式化为货币格式,可以将amount 转换为指定货币格式的字符串	{{ amount | currency:'USD':'symbol':'1.2-2' }}
date(DatePipe)	格式化日期,可以将date 转换为指定格式的日期字符串	{{ date | date:'yyyy-MM-dd' }}
lowercase(LowerCasePipe)	将字符串转换为小写	{{ text | lowercase }}
uppercase(UpperCasePipe )	将字符串转换为大写	{{ text | uppercase }}
number(DecimalPipe)	用于格式化数字为小数,以将number转换为指定小数位数的字符串	{{ number | number:'1.2-2' }}
PercentPipe	用于格式化数字为百分比,可以将percentage转换为百分比形式的字符串	{{ percentage | percent }}
limitTo	限制数组或字符串的长度	{{ text | limitTo:10 }}
json	将对象序列化为 JSON 字符串	{{ object | json }}

AsyncPipe

用于处理异步数据,可以处理异步数据并在模板中显示

{{ asyncData | async }}

 除了上面提到的过滤器（管道pipe），我们还能自定义管道（pipe），下面是在Angular中创建一个格式化电话号码的pipe示例：

1. 首先，在项目中创建一个新的 Angular 管道文件，比如phone.pipe.ts，并在该文件中定义自定义管道：

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({
     name: 'formatPhoneNumber'
   })
   export class FormatPhoneNumberPipe implements PipeTransform {
     transform(value: string): string {
       if (!value) return '';
   
       // 格式化电话号码为 (xxx) xxx-xxxx
       return `(${value.slice(0, 3)}) ${value.slice(3, 6)}-${value.slice(6)}`;
     }
   }
   

2. 在你的组件的 TypeScript 文件中，使用这个自定义管道：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.component.css']
   })
   export class MyComponent {
     phoneNumber: string = '1234567890';
   }
   

3. 在模块文件中引入并声明该自定义管道，比如app.module.ts：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppComponent } from './app.component';
   import { FormatPhoneNumberPipe } from './format-phone-number.pipe'; // 引入自定义管道
   
   @NgModule({
     declarations: [
       AppComponent,
       FormatPhoneNumberPipe // 声明自定义管道
     ],
     imports: [
       BrowserModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

4. 在你的 HTML 模板中，使用这个自定义管道：

   <input type="text" [(ngModel)]="phoneNumber">
   <p>Formatted Phone Number: {{ phoneNumber | formatPhoneNumber }}</p>