网站首页 » 前端开发 » Angular 2+ » Angular 2+ 管道
上一篇:
下一篇:

Angular 2+ 管道

前言

Angular 2+ 管道的管道与AngularJS 中的管道作用一样,对一些数据处理,让它符合我们的预期展示效果。官方也为我们提示了不少的内置管道,我们可以直接在模板中使用它们。下面我们就来讲讲 Angular 2+ 中的管道。

Angular 2+ 内置管道

内置管道比 AngularJS 的要少,因为在Angular 2+中 去掉了一些管道。Angular 2+ 的内置管道包括但不限于:

  • DatePipe:时间格式化
  • UpperCasePipe :大写
  • LowerCasePipe:小写
  • CurrencyPipe:货币
  • PercentPipe:百分比

Angular 2+ 已经把 FilterPipe 和 OrderByPipe 这两个内置管道去掉了,因为这两个管道滥用的话会影响到性能。

有些管道可以传一些参数以满足我们平时项目的需求。比如下面的:

DatePipe 管道可以看这里:https://angular.io/api/common/DatePipe

CurrencyPipe 管道可以看这里:https://angular.io/api/common/CurrencyPipe

CurrencyPipe 管道中有一个 ISO 4217 码作为参数,不同国家都不一样,可以自行在网上搜索下 ISO 4217 码列表,默认是 USD 代表美元。

在官方搜索出 19 的有关管道的 api

记住常用的就行
UpperCasePipe
SlicePipe
Pipe
PercentPipe
LowerCasePipe
AsyncPipe
CurrencyPipe
DatePipe
DecimalPipe
DeprecatedCurrencyPipe
DeprecatedDatePipe
DeprecatedDecimalPipe
DeprecatedI18NPipesModule
DeprecatedPercentPipe
I18nPluralPipe
I18nSelectPipe
JsonPipe
PipeTransform
TitleCasePipe

它们的用法相当地简单:

app.component.html
<div>
  <p>{{phone.name | uppercase}}</p>
  <p>{{phone.price | currency: 'CNY':true}}</p>
  <p>{{phone.ttm | date: 'yyyy年MM月dd日'}}</p>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  phone = { name: "smartisan T3", price: 3699, ttm: 'Sun Mar 18 2018 00:00:00 GMT+0800 (中国标准时间)' }
}

链式管道

管道不可以连用:

<div>
  <p>{{phone.name | uppercase | lowercase}}</p>
</div>

当然像我上面这样用的话就相当于什么都没做(其实是转大写再转回小写),但重点是想通过上面的这种写法来说明下链式管道的使用套路而已。

自定义管道

step.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'setpPipe' })
export class SetpPipe implements PipeTransform {
    transform(value: number, step: string): number {
        let nStep = parseFloat(step);
        let s = isNaN(nStep) ? 0 : nStep;
        let sum = value + s;
        return sum;
    }
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SetpPipe } from './step.pipe';

@NgModule({
  declarations: [
    AppComponent,
    SetpPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 app.module.ts 中引入自定义管道。然后你就可以在模板中使用它了

app.component.html
<div>
  <p>{{phone.price | setpPipe: "3"}}</p>
</div>

通过上面的例子我们可以知道,要想实现一个管道:

  • 从 core 中引入 Pipe, PipeTransform
  • 通过 @Pipe 装饰器告诉 Angular 这个一个 管道,并定义管道名称
  • 然后类中继承 PipeTransform 接口,并在类中实现接口对应的方法( transform 方法),该方法接受一个输入值和一些可选参数,并返回转换后的值。
  • 在 app.module.ts 中的 declarations 数组中添加此管道

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-core-knowledge-pipes/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END