內建管道

Created: November-22, 2018

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`

還有其他人。看看這裡為他們的文件。

例

酒店 -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;
}

酒店 -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.