Работа с pipes¶
Pipes
представляют специальные инструменты, которые позволяют форматировать отображаемые значения. Например, нам надо вывести определенную дату:
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
):
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
, который обрезает строку, может получать в качестве параметра, начальный и конечный индексы подстроки, которую надо вырезать:
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
в качестве параметра может принимать шаблон даты:
import { Component } from '@angular/core'
@Component({
selector: 'my-app',
template: `
<div>{{ myDate | date: 'dd/MM/yyyy' }}</div>
`,
})
export class AppComponent {
myDate = Date.now()
}
Форматирование чисел¶
DecimalPipe
в качестве параметра принимает формат числа в виде шаблона:
{{ value | number [ : digitsInfo [ : locale ] ] }}
value
: само выводимое значениеdigitsInfo
: строка в формате "minIntegerDigits.minFractionDigits-maxFractionDigits", гдеminIntegerDigits
— минимальное количество цифр в целой частиminFractionDigits
— минимальное количество цифр в дробной частиmaxFractionDigits
— максимальное количество цифр в дробной частиlocale
: код применяемой культуры
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
может принимать ряд параметров:
{{ value | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
value
: выводимая суммаcurrencyCode
: код валюты согласно спецификации ISO 4217. Если не указан, то по умолчанию применяется USDdisplay
: указывает, как отображать символ валюты. Может принимать следующие значения:code
: отображает код валюты (например, USD)symbol
(значение по умолчанию): отображает символ валюты (например, \$)symbol-narrow
: некоторые страны используют в качестве символа валюты несколько символов, например, канадский доллар - CA$, данный параметр позволяет получить собственно символ валюты - $string
: отображает произвольную строкуdigitsInfo
: формат числа, который применяется в DecimalPipelocale
: код используемой локали
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
к одному значению, тогда мы можем составлять цепочки выражений, разделенные вертикальной чертой:
import { Component } from '@angular/core'
@Component({
selector: 'my-app',
template: `
<div>{{ message | slice: 6:11 | uppercase }}</div>
`,
})
export class AppComponent {
message = 'Hello World!'
}