Angular 2 — Користувальницькі pipes

17

Від автора: існує можливість створювати в 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.

Angular 2 — Користувальницькі pipes

Крок 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.

Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.

Angular 2 — Користувальницькі pipes