Angular 2 内置管道

示例

Angular2带有一些内置管道：

管	用法	例
DatePipe	date	{{ dateObj | date }} // output is 'Jun 15, 2015'
UpperCasePipe	uppercase	{{ value | uppercase }} // output is 'SOMETEXT'
LowerCasePipe	lowercase	{{ value | lowercase }} // output is 'sometext'
CurrencyPipe	currency	{{ 31.00 | currency:'USD':true }} // output is '$31'
PercentPipe	percent	{{ 0.03 | percent }} //output is %3

还有其他 在这里查看其文档。

示例

hotel-reservation.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'hotel-reservation',
    templateUrl: './hotel-reservation.template.html'
})
export class HotelReservationComponent {
    public fName: string =  'Joe';
    public lName: string = 'SCHMO';
    public reservationMade: string = '2016-06-22T07:18-08:00'
    public reservationFor: string = '2025-11-14';
    public cost: number = 99.99;
}

hotel-reservation.template.html

<div>
    <h1>Welcome back {{fName | uppercase}} {{lName | lowercase}}</h1>
    <p>
        On {reservationMade | date} at {reservationMade | date:'shortTime'} you 
        reserved room 205 for {reservationDate | date} for a total cost of 
        {cost | currency}.
    </p>
</div>

输出结果

Welcome back JOE schmo
On Jun 26, 2016 at 7:18 you reserved room 205 for Nov 14, 2025 for a total cost of 
$99.99.