Від автора: існує можливість створювати в Angular pipes з власними параметрами. Загальний спосіб визначення користувацького пайпа виглядає наступним чином.
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 — Помістіть у зазначений вище файл наступний код.
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 наступний код.
import {
Component
} from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: ‘
Multiplier: {{2 | Multiplier: 10}}
‘
})
export class AppComponent { }
Примітка. У нашому шаблоні ми використовуємо новий користувальницький пайп.
Крок 4 — Переконайтеся, що у файлі app.module.ts вказаний наступний код.
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.
Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.
