Угловой всегда был отличным при обработке данных.
Иногда ваши данные не выглядят совсем так, как вы хотите. К счастью, Angular2 имеет трубы, которые позволяют трансформировать данные.
Трубы очень полезны для преобразования данных в угловых 2.
Встроенные трубы предоставляются для общих задач форматирования, таких как формирование даты, форматов валюты, отображение ответа как JSON отформатировано, преобразование прописных в нижние вице-версии
И если ваше требование не совпадает со встроенными трубами, вы можете создать свой собственный.
Встроенные трубы:
Использование оператора трубы мы можем нанести трубы к контенту трансформации.
The Date pipe transformed this date {{myDate | date: 'fullDate' | upperCase}}
My number as a percentage {{myPercent | percent}}
This was originally lower case {{text | upperCase}}
This was originally upper case {{text | lowerCase}}
{{myContent | truncate: 50 | upperCase}}
Пользовательская реализация трубы:
@Pipe({
name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
tranform(value: string, chars: number): string {
return value.substring(0, chars);
}
}
Труба – это класс, украшенный метаданными труб.
Класс трубы реализует интерфейс PipeTransform.
Способ преобразования, который принимает входное значение, а затем необязательные параметры
Параметризация трубы:
Труба может принять любое количество необязательных параметров.
Чтобы добавить параметры в трубу, следуйте названию трубы с толстой китой (а затем значение параметра.
Если труба может принимать несколько параметров, отделите значения с толстой кишкой (
Пример: Ломтик: 1: 5
Сторирование труб
Там может быть шанс применять более одной трубы.
Чтобы отобразить день рождения в верхнем регистре, день рождения привязан к дате трубы и на верхнюю букву.
Ошитый день рождения
{{ birthday | date | uppercase}}
Чистые и нечистые трубы:
Есть две категории труб: чистый и нечистый.
Трубы по умолчанию чисты, что означает, что значение чистого свойства верно.
Вы можете сделать труб, не обнаружив, устанавливая свой чистый флаг на ложь.
@Pipe({
name: 'truncate',
pure: false
})
Чистые трубы:
Угловые выполняет чистую трубу только тогда, когда она обнаруживает чистое изменение в входное значение.
Чистое изменение в смысле изменения в примитивном входном значении (строка, номер, логический, символ) Изменен ссылка на объект (дата, массив, функция, объект)
Угловые игнорируют вызов чистой трубы при обновлении свойства объекта ввода для таких случаев, у нас были непростые трубы.
Непорная труба:
Угловые выполняет непростой трубу во время каждого цикла обнаружения изменений компонентов.
Пример:
- Если что-то добавляется к героям или удалена, он должен получить обновления.
{{hero.name}}
Посмотрите пример обновления значения в поле «Выбор» при выборе других.
Asyncpipe (> async) – лучший пример нечистой трубы.
Нечистый асинхпап:
Угловая Asyncpipe (> Async) является интересным примером нечистой трубы.
Asyncpipe принимает обещание или наблюдаемое в качестве ввода и автоматически подписывается на вход и возвращает обновленные значения.