首页 > 代码库 > Angular2 - Starter - Pipes, Custom Pipes

Angular2 - Starter - Pipes, Custom Pipes

2024-08-31 10:38:44   215人阅读

在Angular2 模板中，我们在显示数据时，可以使用通道将数据转换成相应的格式的值的形式来显示，而且这不改变源数据。比如，我们可以使用date通道来转换时间显示的格式： {{date | date:‘yyyy-MM-dd‘}} ,(1) 以下是Angular提供的基本的通道.

Basic Pipes
Pipe Name Usage Parameters or Effection
currency {{test.currency | currency }}

1234569678 > USD1,234,569,678.00
date {{test.date | date:‘yyyy-MM-dd‘}}

date:‘mediumDate‘,//Jan,9,2017

date:‘shortTime‘,//9:36 pm
json {{test.json | json }} 
[object Object] > {
  "name": "test",
  "title": "Test Pipes"
} //with json pipe
uppercase {{test.str | uppercase }}  hello pipes > HELLO PIPES
lowercase {{test.str1 | lowercase }}  Hello > hello
percent {{test.percent | percent:‘.3‘ }} percent:‘.3‘//0.25 > 25.000% 
number {{test.decimal | number:‘5.1-2‘ }} number:‘5.1-3‘//23440.0987 > 23,440.099

 

(2) 以下自定义了一转换电话号码指定数位尾号之外的数字的Pipe, +008615527370515 > ***********70515

//tail-number-length.pipe.ts
import { Pipe,PipeTransform } from ‘@angular/core‘;

@Pipe({
//通道名称
  name:‘tailNumberLength‘,
  pure:false
})
export class TailNumberLengthPipe implements PipeTransform{
  transform(value: string, length:number): any {
//对源数据的转换方法
    let tailNumberLength = (length === undefined ? 4 : length);
    let prefixLength = value.length - tailNumberLength;
    let target = ‘‘;
    for(let index = 0;index < prefixLength; ++index){
      target += ‘*‘;
    }
    target += value.substr(prefixLength);
    return target;
  }
}

　　

//tail-number-length.module.ts
import { NgModule } from ‘@angular/core‘;
import { CommonModule } from ‘@angular/common‘;
import { TailNumberLengthPipe } from ‘./tail-number-length.pipe‘;

构建一个NgModule装饰的TailNumberPipeModule
@NgModule({
  declarations:[
//引入TailNumberLengthPipe
    TailNumberLengthPipe
  ],
  imports:[
    CommonModule
  ],
  exports:[
    TailNumberLengthPipe
  ]
})

export class TailNumberPipeModule{};

 

appComponent.module.ts
@NgModule({
  bootstrap: [ AppComponent ],
  imports: [
 // import custom modules
    TailNumberPipeModule
]
})

 

{{person.phone | tailNumberLength:5}}//+008615527370515 > ***********70515

　　

 

Angular2 - Starter - Pipes, Custom Pipes


联系
我们