免費AI編程助手
Angular 管道
用管道轉(zhuǎn)換數(shù)據(jù)
管道用來對字符串、貨幣金額、日期和其他顯示數(shù)據(jù)進行轉(zhuǎn)換和格式化。管道是一些簡單的函數(shù)，可以在模板表達式中用來接受輸入值并返回一個轉(zhuǎn)換后的值。例如，你可以使用一個管道把日期顯示為 1988 年 4 月 15 日，而不是其原始字符串格式。
本主題中使用的范例應用，參閱現(xiàn)場演練 / 下載范例。
Angular 為典型的數(shù)據(jù)轉(zhuǎn)換提供了內(nèi)置的管道，包括國際化的轉(zhuǎn)換（i18n），它使用本地化信息來格式化數(shù)據(jù)。數(shù)據(jù)格式化常用的內(nèi)置管道如下：
- ?
DatePipe?：根據(jù)本地環(huán)境中的規(guī)則格式化日期值。 - ?
UpperCasePipe?：把文本全部轉(zhuǎn)換成大寫。 - ?
LowerCasePipe?：把文本全部轉(zhuǎn)換成小寫。 - ?
CurrencyPipe?：把數(shù)字轉(zhuǎn)換成貨幣字符串，根據(jù)本地環(huán)境中的規(guī)則進行格式化。 - ?
DecimalPipe?：把數(shù)字轉(zhuǎn)換成帶小數(shù)點的字符串，根據(jù)本地環(huán)境中的規(guī)則進行格式化。 - ?
PercentPipe?：把數(shù)字轉(zhuǎn)換成百分比字符串，根據(jù)本地環(huán)境中的規(guī)則進行格式化。
你還可以創(chuàng)建管道來封裝自定義轉(zhuǎn)換，并在模板表達式中使用自定義管道。
先決條件
要想使用管道，你應該對這些內(nèi)容有基本的了解：
- Typescript 和 HTML5 編程
- 帶有 CSS 樣式的 HTML 模板
- 組件
在模板中使用管道
要應用管道，請如下所示在模板表達式中使用管道操作符（?|?），緊接著是該管道的名字，對于內(nèi)置的 ?DatePipe ?它的名字是 ?date ?。這個例子中的顯示如下：
- ?
app.component.html? 在另一個單獨的模板中使用 ?date?來顯示生日。 - ?
hero-birthday1.component.ts? 使用相同的管道作為組件內(nèi)嵌模板的一部分，同時該組件也會設置生日值。
- src/app/app.component.html
<p>The hero's birthday is {{ birthday | date }}</p>import { Component } from '@angular/core';
@Component({
selector: 'app-hero-birthday',
template: "<p>The hero's birthday is {{ birthday | date }}</p>"
})
export class HeroBirthdayComponent {
birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
}該組件的 ?birthday ?值通過管道操作符（?|?）流向 ?date ?函數(shù)。
使用參數(shù)和管道鏈來格式化數(shù)據(jù)
可以用可選參數(shù)微調(diào)管道的輸出。例如，你可以使用 ?CurrencyPipe ?和國家代碼（如 EUR）作為參數(shù)。模板表達式 ?{{ amount | currency:'EUR' }}? 會把 ?amount ?轉(zhuǎn)換成歐元。緊跟在管道名稱（ ?currency ?）后面的是冒號（?:?）和參數(shù)值（?'EUR'?）。
如果管道能接受多個參數(shù)，就用冒號分隔這些值。例如，?{{ amount | currency:'EUR':'Euros '}}? 會把第二個參數(shù)（字符串 ?'Euros '?）添加到輸出字符串中。你可以使用任何有效的模板表達式作為參數(shù)，比如字符串字面量或組件的屬性。
有些管道需要至少一個參數(shù)，并且允許使用更多的可選參數(shù)，比如 ?SlicePipe ?。例如， ?{{ slice:1:5 }}? 會創(chuàng)建一個新數(shù)組或字符串，它以第 1 個元素開頭，并以第 5 個元素結(jié)尾。
范例：格式化日期
下面的例子顯示了兩種不同格式（?'shortDate'? 和 ?'fullDate'?）之間的切換：
- 該 ?
app.component.html? 模板使用 ?DatePipe?（名為 ?date?）的格式參數(shù)把日期顯示為 04/15/88 。 - ?
hero-birthday2.component.ts? 組件把該管道的 format 參數(shù)綁定到 ?template?中組件的 ?format?屬性，并添加了一個按鈕，其 click 事件綁定到了該組件的 ?toggleFormat()? 方法。 - ?
hero-birthday2.component.ts? 組件的 ?toggleFormat()?方法會在短格式（?'shortDate'?）和長格式（?'fullDate'?）之間切換該組件的 ?format?屬性。
- src/app/app.component.html
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>template: `
<p>The hero's birthday is {{ birthday | date:format }}</p>
<button (click)="toggleFormat()">Toggle Format</button>
`export class HeroBirthday2Component {
birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
toggle = true; // start with true == shortDate
get format() { return this.toggle ? 'shortDate' : 'fullDate'; }
toggleFormat() { this.toggle = !this.toggle; }
}點擊 Toggle Format 按鈕可以在 04/15/1988 和 Friday, April 15, 1988 之間切換日期格式。
范例：通過串聯(lián)管道應用兩種格式
可以對管道進行串聯(lián)，以便一個管道的輸出成為下一個管道的輸入。
在下面的范例中，串聯(lián)管道首先將格式應用于一個日期值，然后將格式化之后的日期轉(zhuǎn)換為大寫字符。 ?src/app/app.component.html? 模板的第一個標簽頁把 ?DatePipe ?和 ?UpperCasePipe ?的串聯(lián)起來，將其顯示為 APR 15, 1988。?src/app/app.component.html? 模板的第二個標簽頁在串聯(lián) ?uppercase ?之前，還把 ?fullDate ?參數(shù)傳給了 ?date?，將其顯示為 FRIDAY, APRIL 15, 1988。
- src/app/app.component.html (1)
The chained hero's birthday is
{{ birthday | date | uppercase}}The chained hero's birthday is
{{ birthday | date:'fullDate' | uppercase}}為自定義數(shù)據(jù)轉(zhuǎn)換創(chuàng)建管道
創(chuàng)建自定義管道來封裝那些內(nèi)置管道沒有提供的轉(zhuǎn)換。然后就可以在模板表達式中使用自定義管道了，像內(nèi)置管道一樣，把輸入值轉(zhuǎn)換成顯示輸出。
把一個類標記為一個管道
要把類標記為管道并提供配置元數(shù)據(jù)，請把 ?@Pipe? 裝飾器應用到這個類上。管道類名是 ?UpperCamelCase?（類名的一般約定），相應的 ?name ?字符串是 ?camelCase ?的。不要在 ?name ?中使用連字符。
在模板表達式中使用 ?name ?就像在內(nèi)置管道中一樣。
- 把你的管道包含在 ?
NgModule?元數(shù)據(jù)的 ?declarations?字段中，以便它能用于模板。請查看范例應用中的 ?app.module.ts? 文件（現(xiàn)場演練 / 下載范例）。- 注冊自定義管道。?
Angular CLI? 的 ?ng generate pipe? 命令會自動注冊該管道。
使用 PipeTransform 接口
在自定義管道類中實現(xiàn) ?PipeTransform ?接口來執(zhí)行轉(zhuǎn)換。
Angular 調(diào)用 ?transform ?方法，該方法使用綁定的值作為第一個參數(shù)，把其它任何參數(shù)都以列表的形式作為第二個參數(shù)，并返回轉(zhuǎn)換后的值。
范例：指數(shù)級轉(zhuǎn)換
在游戲中，可能希望實現(xiàn)一種指數(shù)級轉(zhuǎn)換，以指數(shù)級增加英雄的力量。例如，如果英雄的得分是 2，那么英雄的能量會指數(shù)級增長 10 次，最終得分為 1024。你可以使用自定義管道進行這種轉(zhuǎn)換。
下列代碼范例顯示了兩個組件定義：
- ?
exponential-strength.pipe.ts? 通過一個執(zhí)行轉(zhuǎn)換的 ?transform?方法定義了一個名為 ?exponentialStrength?的自定義管道。它為傳給管道的參數(shù)定義了 ?transform?方法的一個參數(shù)（?exponent?）。 - ?
power-booster.component.ts? 組件演示了如何使用該管道，指定了一個值（ 2 ）和一個 exponent 參數(shù)（ 10 ）。
- src/app/exponential-strength.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
/*
* Raise the value exponentially
* Takes an exponent argument that defaults to 1.
* Usage:
* value | exponentialStrength:exponent
* Example:
* {{ 2 | exponentialStrength:10 }}
* formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent = 1): number {
return Math.pow(value, exponent);
}
}import { Component } from '@angular/core';
@Component({
selector: 'app-power-booster',
template: `
<h2>Power Booster</h2>
<p>Super power boost: {{2 | exponentialStrength: 10}}</p>
`
})
export class PowerBoosterComponent { }瀏覽器顯示如下：
Power Booster
Superpower boost: 1024要檢查 ?
exponentialStrength?管道的行為，請查看現(xiàn)場演練 / 下載范例，并在模板中修改值和可選的指數(shù)參數(shù)。
通過管道中的數(shù)據(jù)綁定來檢測變更
你可以通過帶有管道的數(shù)據(jù)綁定來顯示值并響應用戶操作。如果是原始類型的輸入值，比如 ?String ?或 ?Number ?，或者是對象引用型的輸入值，比如 ?Date ?或 ?Array ?，那么每當 Angular 檢測到輸入值或引用有變化時，就會執(zhí)行該輸入管道。
比如，你可以修改前面的自定義管道范例，通過 ?ngModel ?的雙向綁定來輸入數(shù)量和提升因子，如下面的代碼范例所示。
import { Component } from '@angular/core';
@Component({
selector: 'app-power-boost-calculator',
template: `
<h2>Power Boost Calculator</h2>
<label for="power-input">Normal power: </label>
<input id="power-input" type="text" [(ngModel)]="power">
<label for="boost-input">Boost factor: </label>
<input id="boost-input" type="text" [(ngModel)]="factor">
<p>
Super Hero Power: {{power | exponentialStrength: factor}}
</p>
`,
styles: ['input {margin: .5rem 0;}']
})
export class PowerBoostCalculatorComponent {
power = 5;
factor = 1;
}每當用戶改變 “normal power” 值或 “boost factor” 時，就會執(zhí)行 ?exponentialStrength ?管道。
Angular 會檢測每次變更，并立即運行該管道。對于原始輸入值，這很好。但是，如果要在復合對象中更改某些內(nèi)部值（例如日期中的月份、數(shù)組中的元素或?qū)ο笾械膶傩裕托枰私庾兏鼨z測的工作原理，以及如何使用 ?impure?（非純）管道。
變更檢測的工作原理
Angular 會在每次 DOM 事件（每次按鍵、鼠標移動、計時器滴答和服務器響應）之后運行的變更檢測過程中查找對數(shù)據(jù)綁定值的更改。下面這段不使用管道的例子演示了 Angular 如何利用默認的變更檢測策略來監(jiān)控和更新 ?heroes ?數(shù)組中每個英雄的顯示效果。范例顯示如下：
- 在 ?
flying-heroes.component.html (v1)? 模板中， ?*ngFor? 會重復顯示英雄的名字。 - 與之相伴的組件類 ?
flying-heroes.component.ts (v1)? 提供了一些英雄，把這些英雄添加到數(shù)組中，并重置了該數(shù)組。
- src/app/flying-heroes.component.html (v1)
<label for="hero-name">New hero name: </label>
<input type="text" #box
id="hero-name"
(keyup.enter)="addHero(box.value); box.value=''"
placeholder="hero name">
<button (click)="reset()">Reset list of heroes</button>
<div *ngFor="let hero of heroes">
{{hero.name}}
</div>export class FlyingHeroesComponent {
heroes: any[] = [];
canFly = true;
constructor() { this.reset(); }
addHero(name: string) {
name = name.trim();
if (!name) { return; }
const hero = {name, canFly: this.canFly};
this.heroes.push(hero);
}
reset() { this.heroes = HEROES.slice(); }
}每次用戶添加一個英雄時，Angular 都會更新顯示內(nèi)容。如果用戶點擊了 Reset 按鈕，Angular 就會用原來這些英雄組成的新數(shù)組來替換 ?heroes ?，并更新顯示。如果你添加刪除或更改了某個英雄的能力，Angular 也會檢測這些變化并更新顯示。
然而，如果對于每次更改都執(zhí)行一個管道來更新顯示，就會降低你應用的性能。因此，Angular 會使用更快的變更檢測算法來執(zhí)行管道，如下一節(jié)所述。
檢測原始類型和對象引用的純變更
通過默認情況下，管道會定義成純的(pure)，這樣 Angular 只有在檢測到輸入值發(fā)生了純變更時才會執(zhí)行該管道。純變更是對原始輸入值（比如 ?String?、?Number?、?Boolean ?或 ?Symbol ?）的變更，或是對對象引用的變更（比如 ?Date?、?Array?、?Function?、?Object?）。
純管道必須使用純函數(shù)，它能處理輸入并返回沒有副作用的值。換句話說，給定相同的輸入，純函數(shù)應該總是返回相同的輸出。
使用純管道，Angular 會忽略復合對象中的變化，例如往現(xiàn)有數(shù)組中新增的元素，因為檢查原始值或?qū)ο笠帽葘ο笾械牟町愡M行深度檢查要快得多。Angular 可以快速判斷是否可以跳過執(zhí)行該管道并更新視圖。
但是，以數(shù)組作為輸入的純管道可能無法正常工作。為了演示這個問題，修改前面的例子來把英雄列表過濾成那些會飛的英雄。在 ?*ngFor? 中使用 ?FlyingHeroesPipe ?，代碼如下。這個例子的顯示如下：
- 帶有新管道的模板（?
flying-heroes.component.html (flyers)?）。 - ?
FlyingHeroesPipe?自定義管道實現(xiàn)（?flying-heroes.pipe.ts?）。
- src/app/flying-heroes.component.html (flyers)
<div *ngFor="let hero of (heroes | flyingHeroes)">
{{hero.name}}
</div>import { Pipe, PipeTransform } from '@angular/core';
import { Hero } from './heroes';
@Pipe({ name: 'flyingHeroes' })
export class FlyingHeroesPipe implements PipeTransform {
transform(allHeroes: Hero[]) {
return allHeroes.filter(hero => hero.canFly);
}
}該應用現(xiàn)在展示了意想不到的行為：當用戶添加了會飛的英雄時，它們都不會出現(xiàn)在 “Heroes who fly” 中。發(fā)生這種情況是因為添加英雄的代碼會把它 push 到 ?heroes ?數(shù)組中：
this.heroes.push(hero);而變更檢測器會忽略對數(shù)組元素的更改，所以管道不會運行。
Angular 忽略了被改變的數(shù)組元素的原因是對數(shù)組的引用沒有改變。由于 Angular 認為該數(shù)組仍是相同的，所以不會更新其顯示。
獲得所需行為的方法之一是更改對象引用本身?？梢杂靡粋€包含新更改過的元素的新數(shù)組替換該數(shù)組，然后把這個新數(shù)組作為輸入傳給管道。在上面的例子中，你可以創(chuàng)建一個附加了新英雄的數(shù)組，并把它賦值給 ?heroes?。 Angular 檢測到了這個數(shù)組引用的變化，并執(zhí)行了該管道。
總結(jié)一下，如果修改了輸入數(shù)組，純管道就不會執(zhí)行。如果替換了輸入數(shù)組，就會執(zhí)行該管道并更新顯示。
上述例子演示了如何更改組件的代碼來適應某個管道。
為了讓你的組件更簡單，獨立于那些使用管道的 HTML，你可以用一個不純的管道來檢測復合對象（如數(shù)組）中的變化，如下一節(jié)所述。
檢測復合對象中的非純變更
要在復合對象內(nèi)部進行更改后執(zhí)行自定義管道（例如更改數(shù)組元素），就需要把管道定義為 ?impure ?以檢測非純的變更。每當按鍵或鼠標移動時，Angular 都會檢測到一次變更，從而執(zhí)行一個非純管道。
雖然非純管道很實用，但要小心使用。長時間運行非純管道可能會大大降低你的應用速度。
通過把 ?pure ?標志設置為 ?false ?來把管道設置成非純的：
@Pipe({
name: 'flyingHeroesImpure',
pure: false
})下面的代碼顯示了 ?FlyingHeroesImpurePipe ?的完整實現(xiàn)，它擴展了 ?FlyingHeroesPipe ?以繼承其特性。這個例子表明你不需要修改其他任何東西 - 唯一的區(qū)別就是在管道元數(shù)據(jù)中把 ?pure ?標志設置為 ?false ?。
- src/app/flying-heroes.pipe.ts (FlyingHeroesImpurePipe)
@Pipe({
name: 'flyingHeroesImpure',
pure: false
})
export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}import { Pipe, PipeTransform } from '@angular/core';
import { Hero } from './heroes';
@Pipe({ name: 'flyingHeroes' })
export class FlyingHeroesPipe implements PipeTransform {
transform(allHeroes: Hero[]) {
return allHeroes.filter(hero => hero.canFly);
}
}對于非純管道，?FlyingHeroesImpurePipe ?是個不錯的選擇，因為它的 ?transform ?函數(shù)非常簡單快捷：
return allHeroes.filter(hero => hero.canFly);你可以從 ?FlyingHeroesComponent ?派生一個 ?FlyingHeroesImpureComponent?。如下面的代碼所示，只有模板中的管道發(fā)生了變化。
<div *ngFor="let hero of (heroes | flyingHeroesImpure)">
{{hero.name}}
</div>要想確認是否在用戶添加英雄時更新了顯示，請參閱現(xiàn)場演練 / 下載范例。
從一個可觀察對象中解包數(shù)據(jù)
可觀察對象能讓你在應用的各個部分之間傳遞消息。建議在事件處理、異步編程以及處理多個值時使用這些可觀察對象。可觀察對象可以提供任意類型的單個或多個值，可以是同步的（作為一個函數(shù)為它的調(diào)用者提供一個值），也可以是異步的。
使用內(nèi)置的 ?AsyncPipe ?接受一個可觀察對象作為輸入，并自動訂閱輸入。如果沒有這個管道，你的組件代碼就必須訂閱這個可觀察對象來使用它的值，提取已解析的值、把它們公開進行綁定，并在銷毀這段可觀察對象時取消訂閱，以防止內(nèi)存泄漏。 ?AsyncPipe ?是一個非純管道，可以節(jié)省組件中的樣板代碼，以維護訂閱，并在數(shù)據(jù)到達時持續(xù)從該可觀察對象中提供值。
下列代碼范例使用 ?async ?管道將帶有消息字符串（ ?message$? ）的可觀察對象綁定到視圖中。
import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';
@Component({
selector: 'app-hero-async-message',
template: `
<h2>Async Hero Message and AsyncPipe</h2>
<p>Message: {{ message$ | async }}</p>
<button (click)="resend()">Resend</button>`,
})
export class HeroAsyncMessageComponent {
message$: Observable<string>;
private messages = [
'You are my hero!',
'You are the best hero!',
'Will you be my hero?'
];
constructor() {
this.message$ = this.getResendObservable();
}
resend() {
this.message$ = this.getResendObservable();
}
private getResendObservable() {
return interval(500).pipe(
map(i => this.messages[i]),
take(this.messages.length)
);
}
}緩存 HTTP 請求
為了使用 HTTP 與后端服務進行通信，?HttpClient ?服務使用了可觀察對象，并提供了 ?HttpClient.get()? 方法來從服務器獲取數(shù)據(jù)。這個異步方法會發(fā)送一個 HTTP 請求，并返回一個可觀察對象，它會發(fā)出請求到的響應數(shù)據(jù)。
如 ?AsyncPipe ?所示，你可以使用非純管道 ?AsyncPipe ?接受一個可觀察對象作為輸入，并自動訂閱輸入。你也可以創(chuàng)建一個非純管道來建立和緩存 HTTP 請求。
每當組件運行變更檢測時就會調(diào)用非純管道，這可能每隔幾毫秒就運行一次。為避免出現(xiàn)性能問題，只有當請求的 URL 發(fā)生變化時才會調(diào)用該服務器（如下例所示），并使用該管道緩存服務器的響應。顯示如下：
- ?
fetch?管道（ ?fetch-json.pipe.ts? ）。 - 一個用于演示該請求的挽具組件（?
hero-list.component.ts?），它使用一個模板，該模板定義了兩個到該管道的綁定，該管道會向 ?heroes.json? 文件請求英雄數(shù)組。第二個綁定把 ?fetch?管道與內(nèi)置的 ?JsonPipe?串聯(lián)起來，以 JSON 格式顯示同一份英雄數(shù)據(jù)。
- src/app/fetch-json.pipe.ts
import { HttpClient } from '@angular/common/http';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'fetch',
pure: false
})
export class FetchJsonPipe implements PipeTransform {
private cachedData: any = null;
private cachedUrl = '';
constructor(private http: HttpClient) { }
transform(url: string): any {
if (url !== this.cachedUrl) {
this.cachedData = null;
this.cachedUrl = url;
this.http.get(url).subscribe(result => this.cachedData = result);
}
return this.cachedData;
}
}import { Component } from '@angular/core';
@Component({
selector: 'app-hero-list',
template: `
<h2>Heroes from JSON File</h2>
<div *ngFor="let hero of ('assets/heroes.json' | fetch) ">
{{hero.name}}
</div>
<p>Heroes as JSON:
{{'assets/heroes.json' | fetch | json}}
</p>`
})
export class HeroListComponent { }在上面的例子中，管道請求數(shù)據(jù)時的剖面展示了如下幾點：
- 每個綁定都有自己的管道實例。
- 每個管道實例都會緩存自己的 URL 和數(shù)據(jù)，并且只調(diào)用一次服務器。
?fetch ?和 ?fetch-json? 管道會像這樣在瀏覽器中顯示英雄：
Heroes from JSON File
Windstorm
Bombasto
Magneto
Tornado
Heroes as JSON: [ { "name": "Windstorm", "canFly": true }, { "name": "Bombasto", "canFly": false }, { "name": "Magneto", "canFly": false }, { "name": "Tornado", "canFly": true } ]內(nèi)置的 ?
JsonPipe?提供了一種方法來診斷一個離奇失敗的數(shù)據(jù)綁定，或用來檢查一個對象是否能用于將來的綁定。
管道的優(yōu)先級
管道操作符要比三目運算符(??:?)的優(yōu)先級高，這意味著 ?a ? b : c | x? 會被解析成 ?a ? b : (c | x)?。
由于這種優(yōu)先級設定，如果你要用管道處理三目元算符的結(jié)果，就要把整個表達式包裹在括號中，比如 ?(a ? b : c) | x?。
<!-- use parentheses in the third operand so the pipe applies to the whole expression -->
{{ (true ? 'true' : 'false') | uppercase }}
更多建議：