在 Angular 框架中，我们可以使用 管道技术，对视图模板中表达式的计算结果，进行过滤和转换操作，然后对最终的操作结果进行展示。
Angular 为我们提供了很多内置的管道，开箱即用，让我们一起来看看。
uppercase/lowercase 管道
uppercase/lowercase 管道可以把字符串中的字母进行大小写转换。
<p>{{'hello angular 10' | uppercase}}</p>
<p>{{'HELLO ANGULAR 10' | lowercase}}</p>
页面效果：
HELLO ANGULAR 10
hello angular 10
date 管道
date 管道可以把日期类型的数据，按照指定的日期格式，转换成字符串。
<p>浏览日期：{{viewDate | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
页面效果：
浏览日期：2022-05-11 09:27:32
currency 管道
currency 管道可以把数字格式化为本地的货币金额形式的字符串。我们可以通过设置货币代码，改变货币的符号；也可以直接设置货币的符号。
<p>定价：{{100 | currency: '¥' }}</p>
常见国家货币代码如下：
- CNY（Chinese Yuan）：人民币
- USD（U.S. Dollar ）：美元
- FRF（French Franc）：法郎
- HKD（HongKong Dollar）：港元
- USD（United States Dollar）：美元
- CAD（Canadian Dollar）：加拿大元
- CHF（schweizer Franken）：瑞士法郎
- GBP（GreatBritain Pound）：英镑
- NLG（NetherLandish Guilder）：荷兰盾
- DEM（德文 DEutsche M ark）：德国马克
- BEF（BElgischer Franc）：比利时法郎
- JPY（JaPanese Yen）：日元
- AUD（AUstralian Dollar）：澳大利亚元
页面效果：
定价：¥100.00
percent 管道
percent 管道，可以把数字格式化为百分比形式的字符串。
<p>折扣：{{0.3 | percent}}</p>
页面效果：
折扣：30%
完整代码
src/app/book/book.component.ts
import { Component, OnInit } from '@angular/core’;
import { Output, EventEmitter } from "@angular/core”;
import { Input } from "@angular/core”;
@Component({
selector: 'app-book’,
templateUrl: './book.component.html’,
styleUrls: ['./book.component.css’]
})
export class BookComponent implements OnInit {
@Input() name: string;
@Output() liked = new EventEmitter<boolean>();
viewDate: Date = new Date();
constructor() { }
ngOnInit(): void {
}
}
src/app/book/book.component.html
<p *ngIf="name === '《三体》'">{{name}} book works!</p>
<p *ngIf="name === '《球状闪电》'">{{name}} book works!</p>
<p>定价：{{100 | currency: '¥' }}</p>
<p>折扣：{{0.3 | percent}}</p>
<p>浏览日期：{{viewDate | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
<button (click)="liked.emit(true)">喜欢</button>
src/app/app.component.html
<p>{{'hello angular 10' | uppercase}}</p>
<p>{{'HELLO ANGULAR 10' | lowercase}}</p>
<app-book [name]="bookName" (liked)="onLike($event)"></app-book>
<h4>更多图书</h4>
<ul>
<li *ngFor="let book of books">{{book}}</li>
</ul>
<h4>今日推荐</h4>
<div [ngSwitch]=“specialBook”>
<p *ngSwitchCase="'《三体》'">{{specialBook}}</p>
<p *ngSwitchCase="'《超新星纪元》'">{{specialBook}}</p>
<p *ngSwitchCase="'《黑暗森林》'">{{specialBook}}</p>
<p *ngSwitchDefault="'《死神永生》'">{{specialBook}}</p>
</div>
页面效果
Angular 管道效果图
网友评论