Перейти к содержанию

Работа с pipes

Pipes представляют специальные инструменты, которые позволяют форматировать отображаемые значения. Например, нам надо вывести определенную дату:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>Без форматирования: {{ myDate }}</div>
    <div>С форматированием: {{ myDate | date }}</div>
  `,
})
export class AppComponent {
  myDate = new Date(1961, 3, 12)
}

Здесь создается дата, которая дважды выводится в шаблоне. Во втором случае к дате применяется форматирование с помощью класса DatePipe.

Скриншот

Встроенные pipes

В Angular 6 есть ряд встроенных pipes. Основные из них:

  • CurrencyPipe: форматирует валюту
  • PercentPipe: форматирует проценты
  • UpperCasePipe: переводит строку в верхний регистр
  • LowerCasePipe: переводит строку в нижний регистр
  • DatePipe: форматирует дату
  • DecimalPipe: задает формат числа
  • SlicePipe: обрезает строку

При применении классов суффикс Pipe отбрасывается (за исключением DecimalPipe — для его применения используется название number):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>{{ welcome | uppercase }}</div>
    <div>{{ welcome | lowercase }}</div>
    <div>{{ persentage | percent }}</div>
    <div>{{ persentage | currency }}</div>
  `,
})
export class AppComponent {
  welcome: string = 'Hello World!'
  persentage: number = 0.14
}

Скриншот

Параметры в pipes

Pipes могут получать параметры. Например, пайп SlicePipe, который обрезает строку, может получать в качестве параметра, начальный и конечный индексы подстроки, которую надо вырезать:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>{{ welcome | slice: 3 }}</div>
    <div>{{ welcome | slice: 6:11 }}</div>
  `,
})
export class AppComponent {
  welcome: string = 'Hello World!'
}

Все параметры в пайп передаются через двоеточие. В данном случае slice:6:11 вырезает подстроку, начиная с 6 до 11 индекса. При этом, если начала выреза строки обязательно передавать, то конечный индекс необязателен. В этом случае в качестве конечного индекса выступает конец строки.

Скриншот

Форматирование дат

DatePipe в качестве параметра может принимать шаблон даты:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>{{ myDate | date: 'dd/MM/yyyy' }}</div>
  `,
})
export class AppComponent {
  myDate = Date.now()
}

Форматирование чисел

DecimalPipe в качестве параметра принимает формат числа в виде шаблона:

1
{{ value | number [ : digitsInfo [ : locale ] ] }}
  • value: само выводимое значение
  • digitsInfo: строка в формате "minIntegerDigits.minFractionDigits-maxFractionDigits", где
  • minIntegerDigits — минимальное количество цифр в целой части
  • minFractionDigits — минимальное количество цифр в дробной части
  • maxFractionDigits — максимальное количество цифр в дробной части
  • locale: код применяемой культуры
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>{{ pi | number: '2.1-2' }}</div>
    <div>{{ pi | number: '3.5-5' }}</div>
  `,
})
export class AppComponent {
  pi: number = 3.1415
}

Скриншот

Форматирование валюты

CurrencyPipe может принимать ряд параметров:

1
{{ value | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
  • value: выводимая сумма
  • currencyCode: код валюты согласно спецификации ISO 4217. Если не указан, то по умолчанию применяется USD
  • display: указывает, как отображать символ валюты. Может принимать следующие значения:
  • code: отображает код валюты (например, USD)
  • symbol (значение по умолчанию): отображает символ валюты (например, $)
  • symbol-narrow: некоторые страны используют в качестве символа валюты несколько символов, например, канадский доллар - CA$, данный параметр позволяет получить собственно символ валюты - $
  • string: отображает произвольную строку
  • digitsInfo: формат числа, который применяется в DecimalPipe
  • locale: код используемой локали
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>{{ money | currency: 'RUB':'code' }}</div>
    <div>{{ money | currency: 'RUB':'symbol-narrow' }}</div>
    <div>
      {{ money | currency: 'RUB':'symbol':'1.1-1' }}
    </div>
    <div>
      {{
        money
          | currency: 'RUB':'symbol-narrow':'1.1-1':'ru-RU'
      }}
    </div>
    <div>
      {{ money | currency: 'RUB':'тока седня по цене ' }}
    </div>
  `,
})
export class AppComponent {
  money: number = 23.45
}

Скриншот

Цепочки pipes

Вполне возможно, что мы захотим применить сразу несколько pipes к одному значению, тогда мы можем составлять цепочки выражений, разделенные вертикальной чертой:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <div>{{ message | slice: 6:11 | uppercase }}</div>
  `,
})
export class AppComponent {
  message = 'Hello World!'
}

Комментарии