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

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

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

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
 transform(parameters): returntype { } 
}

Где:

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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

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

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

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

import { 
 Component 
} from '@angular/core'; 

@Component ({ 
 selector: 'my-app', 
 template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree