Angular 2 — Пользовательские pipes

Angular 2 — Пользовательские pipes

От автора: существует возможность создавать в Angular pipes с собственными параметрами. Общий способ определения пользовательского пайпа выглядит следующим образом.

Где:

‘Pipename’ — это имя пайпа.

Pipeclass — это имя класса, назначенного для пользовательского пайпа.

Transform — это функция, которая работает с пайпом.

Parameters — это параметры, которые передаются в пайпе.

Returntype — это возвращаемый тип пайпа.

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

Шаг 1. Сначала создайте файл с именем multiplier.pipe.ts.

Angular 2 — Пользовательские pipes

Шаг 2 — Поместите в указанный выше файл следующий код.

Примечание:

Сначала мы импортируем модули Pipe и PipeTransform.

Затем мы создаем пайп с именем ‘Multiplier’.

Создаем класс с именем MultiplierPipe, который реализует модуль PipeTransform.

Затем функция transform принимает значение и несколько параметров и выводит результат умножения обоих чисел.

Шаг 3 – Поместите в файл app.component.ts следующий код.

Примечание. В нашем шаблоне мы используем новый пользовательский пайп.

Шаг 4 — Убедитесь, что в файле app.module.ts указан следующий код.

В приведенном выше коде необходимо отметить следующее.

Мы должны обеспечить включение модуля MultiplierPipe.

Нам также необходимо убедиться, что он включен в раздел declarations.

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

Angular 2 — Пользовательские pipes

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: