Поиск по сайту:

Создание пользовательских пайпов в Angular


Pipes в Angular 2+ — отличный способ преобразовывать и форматировать данные прямо из ваших шаблонов. По умолчанию вы получаете каналы для дат, валюты, процентов и регистров символов, но вы также можете легко определить свои собственные каналы. Здесь, например, мы создаем канал, который принимает строку и меняет порядок букв. Вот код, который будет помещен в файл reverse-str.pipe.ts в папке вашего приложения:

import { Pipe, PipeTransform } from '@angular/core';


Затем вы должны включить пользовательский канал в качестве объявления в свой модуль приложения:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ReverseStr } from './reverse-str.pipe.ts';

И, наконец, в ваших шаблонах вы бы использовали этот пользовательский канал следующим образом:

{{ user.name | reverseStr }}

Труба с параметрами

Вы также можете определить любое количество параметров в канале, что позволит вам передавать в него параметры. Например, вот канал, который добавляет строку до и после предоставленной строки:

@Pipe({name: 'uselessPipe'})
export class uselessPipe implements PipeTransform {
  transform(value: string, before: string, after: string): string {
    let newStr = `${before} ${value} ${after}`;
    return newStr;
  }
}

И вы бы назвали это так:

{{ user.name | uselessPipe:"Mr.":"the great" }}

Обратите внимание, как мы использовали интерполяцию строк ES6 для создания новой строки с такой легкостью: \\$ {before} $ {value} $ {after}\\