Angular 2 内置管道

2024-04-13 11:30:03 433

Angular2带有一些内置管道：

管用法例DatePipedate{{dateObj|date}}//outputis'Jun15,2015'UpperCasePipeuppercase{{value|uppercase}}//outputis'SOMETEXT'LowerCasePipelowercase{{value|lowercase}}//outputis'sometext'CurrencyPipecurrency{{31.00|currency:'USD':true}}//outputis'$31'PercentPipepercent{{0.03|percent}}//outputis%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.

Angular 2 内置管道

示例

Angular2带有一些内置管道：

示例

hotel-reservation.component.ts

hotel-reservation.template.html

热门推荐

随机推荐