Работа с 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. Если не указан, то по умолчанию применяется USD
• display: указывает, как отображать символ валюты. Может принимать следующие значения:
  • code: отображает код валюты (например, USD)
  • symbol (значение по умолчанию): отображает символ валюты (например, $)
  • symbol-narrow: некоторые страны используют в качестве символа валюты несколько символов, например, канадский доллар — CA$, данный параметр позволяет получить собственно символ валюты — $
  • string: отображает произвольную строку
• digitsInfo: формат числа, который применяется в DecimalPipe
• locale: код используемой локали

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!';
}

Комментарии