angular管道

Posted 2021-04-26 雅哒华

AsyncPipe 

AsyncPipe 订阅一个 Observable 或 Promise 对象，并返回它发出的最新值。 当发出新值时，异步管道会主动调用变化检测器的 markForCheck() 方法，标识组件需执行变化检测。 当组件被销毁时，异步管道自动取消订阅，以避免潜在的内存泄漏。

用 Promise 来修复 AsyncPipe 发送多次 HTTP 请求的问题：

this.person = this.http.get("https://jsonplaceholder.
typicode.com/posts/1")
 .map(res => res.json()).toPromise()

<div>      <p>{{ (person$ | async)?.id }}</p>      <p>{{ (person$ | async)?.title }}</p>      <p>{{ (person$ | async)?.body }}</p>      <button (click)="showPersonInfo()">显示用户ID</button>      <p *ngIf="isShow">{{ (person$ | async)?.id }}</p>    </div>

I18nSelectPipe

mapping一个对象，指示应该显示的文本提供的不同值expression。如果映射关键字中没有一个与该值匹配expression，则other返回键的内容，否则返回空字符串。

export class I18nSelectPipeComponent {  gender: string = 'male';  inviteMap: any = {'male': 'Invite him.', 'female': 'Invite   her.', 'other': 'Invite them.'};

}

<div>{{gender | i18nSelect: inviteMap}} </div> 返回Invite him.

I18nPluralPipe

expression | i18nPlural:mapping[:locale]

• expression 是一个数字。

• mapping是模仿ICU格式的对象，请参阅 http://userguide.icu-project.org/formatparse/messages

• locale是一个string定义使用的语言环境（LOCALE_ID默认使用当前）

DecimalPipe

number_expression | number[:digitInfo[:locale]]

将一个数字格式化为文本。组大小和分隔符以及其他特定于语言环境的配置均基于活动语言环境。

• digitInfo是一个string具有以下格式：
  {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

• minIntegerDigits是要使用的最小整数位数。默认为1。

• minFractionDigits是分数后的最小位数。默认为0。

• maxFractionDigits是分数后的最大位数。默认为3。

• locale是一个string定义使用的语言环境（LOCALE_ID默认使用当前）

CurrencyPipe

number_expression | currency[:currencyCode[:display[:digitInfo[:locale]]]]

用于currency将数字格式化为货币。

• currencyCode是ISO 4217货币代码，例如USD美元和EUR欧元。

• display 表示是显示货币符号还是代码。

• code（默认）：使用代码（例如USD）。

• symbol：使用符号（例如$）。

• symbol-narrow：有些国家有两种货币符号，一种是正规货币，一种是货币符号

• boolean（从v5开始弃用）：true对于符号而言是code 狭义的（例如，加拿大元CAD具有符号CA$和符号窄$）。如果所选货币没有窄的符号，将使用常规符号。

• locale是一个string定义使用的语言环境（LOCALE_ID默认使用当前）

1. @Component({

2.  selector: 'currency-pipe',

3.  template: `<div>

4.    <!--output '$0.259'-->

5.    <p>A: {{a | currency}}</p>

6.  

7.    <!--output 'CA$0.26'-->

8.    <p>A: {{a | currency:'CAD'}}</p>

9.  

10.    <!--output 'CAD0.26'-->

11.    <p>A: {{a | currency:'CAD':'code'}}</p>

12.  

13.    <!--output 'CA$0,001.35'-->

14.    <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>

15.  

16.    <!--output '$0,001.35'-->

17.    <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>

18.  

19.    <!--output '0 001,35 CA$'-->

20.    <p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>

21.  </div>`

22. })

23. export class CurrencyPipeComponent {

24.  a: number = 0.259;

25.  b: number = 1.3495;

26. }

JsonPipe

使用将值转换为字符串JSON.stringify。用于调试。

UpperCasePipe

将文本转换为大写

LowerCasePipe

将文本转换为小写

PercentPipe

将数字格式化为百分比。

DeprecatedDecimalPipe

number_expression | number[:digitInfo]

• digitInfo is a string which has a following format: 
  {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

• minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.

• minFractionDigits is the minimum number of digits after fraction. Defaults to 0.

• maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.