От автора: существует возможность создавать в Angular pipes с собственными параметрами. Общий способ определения пользовательского пайпа выглядит следующим образом.
|
1 2 3 4 5 6 |
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'Pipename'}) export class Pipeclass implements PipeTransform { transform(parameters): returntype { } } |
Где:
‘Pipename’ — это имя пайпа.
Pipeclass — это имя класса, назначенного для пользовательского пайпа.
Transform — это функция, которая работает с пайпом.
Parameters — это параметры, которые передаются в пайпе.
Returntype — это возвращаемый тип пайпа.
Давайте создадим пользовательский пайп, который умножает два числа. Затем мы будем использовать этот пайп в нашем классе компонента.
Шаг 1. Сначала создайте файл с именем multiplier.pipe.ts.
Шаг 2 — Поместите в указанный выше файл следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Pipe, PipeTransform } from '@angular/core'; @Pipe ({ name: 'Multiplier' }) export class MultiplierPipe implements PipeTransform { transform(value: number, multiply: string): number { let mul = parseFloat(multiply); return mul * value } } |
Примечание:
Сначала мы импортируем модули Pipe и PipeTransform.
Затем мы создаем пайп с именем ‘Multiplier’.
Создаем класс с именем MultiplierPipe, который реализует модуль PipeTransform.
Затем функция transform принимает значение и несколько параметров и выводит результат умножения обоих чисел.
Шаг 3 – Поместите в файл app.component.ts следующий код.
|
1 2 3 4 5 6 7 8 9 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' }) export class AppComponent { } |
Примечание. В нашем шаблоне мы используем новый пользовательский пайп.
Шаг 4 — Убедитесь, что в файле app.module.ts указан следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { MultiplierPipe } from './multiplier.pipe' @NgModule ({ imports: [BrowserModule], declarations: [AppComponent, MultiplierPipe], bootstrap: [AppComponent] }) export class AppModule {} |
В приведенном выше коде необходимо отметить следующее.
Мы должны обеспечить включение модуля MultiplierPipe.
Нам также необходимо убедиться, что он включен в раздел declarations.
После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
