Пример угловых труб | Учебное пособие по угловым 9 трубам

Каналы в Angular — это простой способ преобразования значений в шаблоне. Канал принимает значение или значения, а затем возвращает значение. Angular поставляется с набором каналов, таких как DatePipe, UpperCasePipe, LowerCasePipe, CurrentcyPipe и PercentPipe, и все они доступны для использования в любом шаблоне angular.

Что такое Angular Pipes

Angular Pipes принимает целые числа, строки, массивы и даты в качестве входных данных, разделенных | для преобразования в требуемый формат и отображения его в браузере.

Внутри выражения интерполяции мы можем определить канал и использовать его в зависимости от ситуации, поскольку существует множество типов каналов, которые мы можем использовать в приложении Angular.

Angular Pipes — полезная функция.

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

Angular 9 Pipes ранее назывались фильтрами в AngularJS, а начиная с Angular 2 — конвейерами. Канал принимает данные как входные и преобразует их в желаемый результат.

Встроенный Угловые трубы

Angular не имеют FilterPipe или OrderByPipe.

Angular не предоставляет каналы для фильтрации или сортировки списков, потому что они плохо работают и предотвращают агрессивную минификацию.

И для filter , и для order требуются параметры, ссылающиеся на свойства объекта.

Каналы — отличный способ инкапсулировать и совместно использовать общее преобразование отображаемого значения.

  1. AsyncPipe
  2. CurrencyPipe
  3. DatePipe
  4. DecimalPipe
  5. JsonPipe
  6. PercentPipe
  7. LowerCasePipe
  8. UpperCasePipe
  9. SlicePipe
  10. TitleCasePipe

Пример каналов Angular

Давайте установим новый проект Angular 9, введя следующую команду.

Теперь давайте используем конвейер даты в Angular.

Итак, напишите следующий код внутри файла app.component.ts .

//app.component.tsimport {Component  } из '@ angular/core'; @ Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'hibited})export class  AppComponent {birthday = new Date (1993, 8, 10);} 

Помните, что месяц начинается с 0. Итак, январь равен 0 и так далее.

Теперь давайте напишем следующий код внутри файла app.component.html .

  

Дата рождения Крунала: {{день рождения | date}}

Итак, здесь мы использовали DatePipe для отображения свойства даты в формате даты.

Параметризация канала в Angular 9

Мы также можем передать параметр конвейеру. Вы можете написать такой HTML-код для передачи параметра.

  

Дата рождения Крунала - {{birthday | date: "dd/MM/yyyy"}}

Сохраните файл, и вы увидите внутри браузера, что страница имеет другой формат даты, как определено здесь.

Объединение каналов

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

  

Дата рождения Крунала - {{birthday | дата | uppercase}}

Теперь ваша дата пишется прописными буквами.

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

Есть две категории каналов:

1) чистые

2) нечистый .

По умолчанию каналы в Angular чистые. Каждая труба, которую вы видели до сих пор, была чиста, как встроенная. Вы можете сделать канал нечистым, установив для флага pure значение false.

Чистые каналы

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

Загрязненные трубы

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

Как создать собственный угловой канал?

Вы можете написать свои собственные каналы. Давайте создадим новый канал внутри папки приложения под названием power.pipe.ts file.

Добавьте в него следующий код.

//power.pipe.tsimport {Pipe, PipeTransform} from '@ angular/core'; @ Pipe ({name: 'power'}) класс экспорта PowerPipe реализует PipeTransform {transform (base: number, exponent: number):  число {вернуть Math.pow (основание, показатель степени);  }} 

PowerPipe отвечает за возврат основания в степень экспоненты, то есть baseexponent .

Теперь мы можем вызвать этот канал внутри файла app.component.html следующим образом.

 

{{2 | power: 5}}

  1. Канал - это класс, украшенный метаданными конвейера.
  2. Класс канала Angular реализует метод transform () интерфейса PipeTransform, который принимает входное значение, за которым следуют необязательные параметры, и возвращает преобразованное значение. В нашем случае мы взяли два параметра.
  3. В нашем примере есть один дополнительный аргумент метода преобразования для каждого параметра, передаваемого конвейеру. У нашего канала есть один такой параметр: показатель степени.
  4. Чтобы сообщить Angular, что это канал, вы применяете декоратор @Pipe, который вы импортируете из базовой библиотеки Angular.
  5. Декоратор @Pipe позволяет нам определять имя канала, которое вы можете использовать в выражениях шаблона. Это должен быть действительный идентификатор JavaScript.

Наконец, пример Angular 9 Pipes завершен. Спасибо, что приняли.

См. Также

Angular Crud

Angular NgClass

Angular NgSwitch

Angular NgFor

Угловые формы

Оцените статью
nanomode.ru
Добавить комментарий