трубы

Как правило, когда мы выполняем преобразование данных, мы реализуем преобразование в нашей модели, например, мы скажем, что у нас есть число 1423,46, и мы хотим отобразить его так, чтобы оно имело вид валюты, например, $ 1423,56. мы можем преобразовать число в строку в модели, но если единственное место, где мы хотим показать вышеуказанный эффект, это представление, то рекомендуется использовать каналы.

Очевидно, что некоторые значения выигрывают от небольшого редактирования. Вы можете заметить, что вы хотите много раз повторять одни и те же преобразования, как внутри, так и во многих приложениях. Вы можете почти думать о них как о стилях. На самом деле, вы можете применять их в своих шаблонах HTML, как и стили.

Угловой канал - это способ записи преобразований отображаемого значения, которые вы можете объявить в своем HTML.

Использование труб

Канал принимает данные в качестве входных данных и преобразует их в желаемый выходной. В качестве варианта использования мы будем использовать каналы для преобразования свойства дня рождения компонента в удобную для человека дату.

HTML-код (сообщение о дне рождения с использованием канала):

<p>
  My friend's birthday is {{ birthday | date }}
</p>

Код TypeScript (сообщение о дне рождения с использованием канала):

import { Component } from '@angular/core';
@Component({
  selector: 'app-friend-birthday',
  template: `
My friend's birthday is {{ birthday | date }}
`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

Демонстрация в реальном времени:

См. Pen pipe_birthdayExample.ts от w3resource ( @ w3resource ) в CodePen .

Внутри интерполяционного выражения вы передаете значение дня рождения компонента через оператор канала (|) в функцию конвейера Date справа. Все трубы работают таким образом.

Встроенные трубы

Angular поставляется с набором каналов, таких как DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe и PercentPipe. Все они доступны для использования в любом шаблоне.

Параметризация трубы

Канал может принимать любое количество необязательных параметров для точной настройки своего вывода. Чтобы добавить параметры в канал, введите имя канала с двоеточием (:), а затем значение параметра (например, валюта: «EUR»). Если канал принимает несколько параметров, разделите значения двоеточиями (например, slice: 1: 5)

Цепные трубы

Вы можете объединить трубы в потенциально полезные комбинации. В следующем примере для отображения дня рождения в верхнем регистре день рождения связывается с DatePipe и с UpperCasePipe. День рождения отображается как 15 апреля 1988 года.

friend.html

The chained friend's birthday is {{ birthday | date | uppercase}}

Этот пример, который отображает FRIDAY, 15 апреля 1988 года, соединяет те же каналы, что и abov, но передает и параметр на сегодняшний день.

friend.html

The chained hero's birthday is {{  birthday | date:'fullDate' | uppercase}}

Пользовательские трубы

Вы можете написать свои собственные трубы. Вот пользовательский канал с именем ExponentialStrengthPipe, который может увеличить возможности аватара:

Код TypeScript (exponential-strong.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: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

Демонстрация в реальном времени:

См. Ручка pipe_custompipes от w3resource ( @ w3resource ) в CodePen .

Это определение канала раскрывает следующие ключевые моменты:

Труба - это класс, украшенный метаданными трубы.

Класс pipe реализует метод преобразования интерфейса PipeTransform, который принимает входное значение, за которым следуют необязательные параметры, и возвращает преобразованное значение.

Будет один дополнительный аргумент метода transform для каждого параметра, передаваемого в канал. У вашей трубы есть один такой параметр: показатель степени.

Чтобы сообщить Angular, что это канал, вы применяете декоратор @Pipe, который вы импортируете из базовой библиотеки Angular.

Декоратор @Pipe позволяет вам определить имя канала, которое вы будете использовать в выражениях шаблона. Это должен быть действительный идентификатор JavaScript. Название вашей трубы - экспоненциальная сила.

Ниже приведен компонент, который демонстрирует exponential-сила.pipe.ts

Код TypeScript:

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 { }

Демонстрация в реальном времени:

См. Pen custompipes_component.ts от w3resource ( @ w3resource ) в CodePen .

Чистые и нечистые трубы

@Pipe({
  name: 'myCustomPipe', 
  pure: false/true        <----- here (default is `true`)
})
export class MyCustomPipe {}

Есть две категории труб: чистые и нечистые. Трубы чистые по умолчанию. Каждая труба, которую вы видели до сих пор, была чистой. Вы делаете трубу нечистой, устанавливая ее чистый флаг в false.

Чистые трубы

Angular выполняет чистый канал только тогда, когда обнаруживает чистое изменение входного значения. Чистое изменение - это либо изменение примитивного входного значения (String, Number, Boolean, Symbol), либо изменение ссылки на объект (Date, Array, Function, Object).

Angular игнорирует изменения внутри (составных) объектов. Он не будет вызывать чистый канал, если вы измените месяц ввода, добавите его во входной массив или обновите свойство объекта ввода.

Это может показаться ограничительным, но это также быстро. Проверка ссылки на объект выполняется быстро - намного быстрее, чем глубокая проверка на различия - поэтому Angular может быстро определить, может ли он пропускать выполнение канала и обновление представления.

По этой причине чистый канал предпочтительнее, если вы можете жить со стратегией обнаружения изменений. Когда вы не можете, вы можете использовать нечистую трубу.

Нечистые трубы

Angular выполняет нечистую трубу во время каждого цикла обнаружения изменений компонентов. Нечистый канал вызывается часто, так же часто, как каждое нажатие клавиши или движение мыши.

Помня об этом, осторожно используйте нечистую трубу. Дорогая, долговечная труба может разрушить пользовательский опыт.

Предыдущая: Атрибуты Директивы
Далее: Реактивные формы