ТРУБЫ УГЛОВЫЕ |
Angular всегда отлично справлялся с данными.
Иногда ваши данные выглядят не совсем так, как вы хотите. К счастью, в Angular2 есть каналы, позволяющие преобразовывать данные.
Pipes очень полезны для преобразования данных в angular 2.
Встроенные конвейеры предназначены для общих задач форматирования, таких как
форматирование даты,
валютные форматы,
отображение ответа в формате JSON,
преобразование верхнего регистра в нижний наоборот
и если ваши требования не соответствуют встроенным каналам, вы можете создать свой собственный.
Встроенные трубы:
Используя оператор канала, мы можем применить каналы к трансформируемому содержимому.
<p>The Date pipe transformed this date {{myDate | date: 'fullDate' | upperCase}}</p>
<p>My number as a percentage {{myPercent | percent}}</p>
<p>This was originally lower case {{text | upperCase}}</p>
<p>This was originally upper case {{text | lowerCase}}</p>
<p>{{myContent | truncate: 50 | upperCase}}</p>
Пользовательская реализация трубы:
@Pipe({
name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
tranform(value: string, chars: number): string {
return value.substring(0, chars);
}
}
Pipe — это класс, украшенный метаданными pipe.
Класс pipe реализует интерфейс pipeTransform.
метод преобразования, который принимает входное значение, за которым следуют необязательные параметры
Параметрирование трубы:
Канал может принимать любое количество необязательных параметров.
Чтобы добавить параметры в канал, поставьте двоеточие после имени канала (
а затем значение параметра.
Если канал может принимать несколько параметров, разделяйте значения двоеточием (
Пример: срез: 1:5
Соединение труб
Там может быть шанс применить более одной трубы.
Чтобы день рождения отображался в верхнем регистре, он привязывается к каналу даты и каналу upperCase.
Прикованный день рождения
{{ birthday | date | uppercase}}
Чистые и нечистые трубы:
Существует две категории труб:
чистые и нечистые.
трубы по умолчанию являются чистыми, что означает, что значение pure proerty истинно.
Вы можете сделать канал нечистым, установив для его флага pure значение false.
@Pipe({
name: 'truncate',
pure: false
})
Чистые трубы:
Angular выполняет чистый канал только тогда, когда обнаруживает чистое изменение входного значения.
Чистое изменение в смысле изменения примитивного входного значения (строка, число, логическое значение, символ)
измененная ссылка на объект (Дата, Массив, Функция, Объект)
Angular игнорирует вызов чистого канала при обновлении свойства входного объекта для таких случаев, когда у нас будут нечистые каналы.
Нечистая труба:
Angular выполняет нечистую трубу во время каждого цикла обнаружения изменения компонента.
Пример:
- если что-то добавляется к героям или удаляется, оно должно получать обновления.
<div *ngFor="let hero of (heroes | flyingHeroesImpure)">
{{hero.name}}
</div>
Посмотрите @ пример обновления значения в поле выбора при выборе других.
AsyncPipe (> async) — лучший пример нечистого канала.
Нечистый AsyncPipe:
Угловой Asyncpipe(> async) — интересный пример нечистого канала.
Asyncpipe принимает Promise или Observable в качестве входных данных, автоматически подписывается на ввод и возвращает обновленные значения.
