使用 Angular 管道

在 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 管道效果图