Како направити прилагођене цеви у Ангулару

Цеви су моћна угаона функција која вам омогућава да трансформишете и форматирате податке у вашој апликацији. Они пружају згодан начин за манипулисање подацима пре него што их прикажу кориснику, чинећи вашу апликацију динамичнијом и једноставнијом за коришћење.

Ангулар нуди низ уграђених цеви као што су ДатеПипе, ЦурренциПипе и УпперЦасеПипе. Заједно са уграђеним цевима које Ангулар нуди, можете креирати прилагођене цеви за трансформацију података на било који начин који вам је потребан.

Поставите свој Ангулар пројекат

Пре креирања прилагођених цеви, уверите се да сте разуме цеви у Ангулару. Да бисте могли да подесите Ангулар пројекат, уверите се да имате Ангулар ЦЛИ инсталиран на вашој машини. Можете га инсталирати са нпм (менаџер пакета чворова).

Инсталирајте Ангулар ЦЛИ тако што ћете покренути следећу команду:

npm install -g @angular/cli

Затим креирајте нови Ангулар пројекат покретањем ове команде:

ng new my-app

Када креирате пројекат, идите до директоријума пројекта и отворите апликацију на свом ИДЕ-у.

Направите прилагођену цев

Сада када сте подесили своју Ангулар апликацију, следећа ствар коју треба да урадите је да креирате прилагођену цев. Да бисте креирали прилагођену цев, морате да генеришете нову користећи Ангулар ЦЛИ.

Да бисте то урадили, покрените следећу команду у директоријуму ваше апликације на терминалу:

ng generate pipe customPipe

Ова команда ће генерисати две датотеке са именом цустом-пипе.пипе.тс и цустом-пипе.пипе.спец.тс у срц/апп именик. Датотека цустом-пипе.пипе.тс је ТипеСцрипт датотеку који садржи код за дефинисање ваше прилагођене цеви. Користићете цустом-пипе.пипе.спец.тс за покретање тестова на прилагођеној цеви.

У цустом-пипе.пипе.тс датотеку, наћи ћете ове линије кода:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

Овај блок кода увози Цев декоратер и ПипеТрансформ интерфејс из @ангулар/цоре модул. Декоратор цеви дефинише метаподатке за цев, а класа цеви имплементира интерфејс ПипеТрансформ.

У ЦустомПипеПипе класе, имплементирате ПипеТрансформ интерфејс, који захтева имплементацију преобразити методом. Метод трансформације је одговоран за трансформацију улазне вредности.

Тхе преобразити метода узима два параметра, вредност и аргс. Параметар вредности представља вредност трансформације цеви, а параметар аргс представља опционе параметре које можда желите да додате.

Сада сте разумели основни принцип цустом-пипе.пипе.тс датотеку, замените горњи блок кода овим кодом:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

У овом блоку кода, преобразити метода узима вредност параметар типа низ као аргумент и враћа низ стрингова. Метод трансформације дели улазни низ у низ појединачних знакова користећи разделити метода и враћа резултујући низ.

Интеграција прилагођене цеви у вашу апликацију

Успешно сте креирали своју прилагођену цев и сада можете да је користите у својим Ангулар шаблонима. Пре употребе прилагођене цеви у вашој апликацији, увезите је и декларишете у својој апп.модуле.тс фајл. Да бисте то урадили, замените код у апп.модуле.тс следећим:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
 declarations: [
 AppComponent,
 CustomPipePipe
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclass AppModule { }

Сада можете да користите цев у својим шаблонима. Отвори апп.цомпонент.хтмл датотеку и додајте следећи код:

<p>{{ 'apple' | CustomPipe }}p>

У овом примеру користите ЦустомПипе цев за трансформацију струне 'јабука' у низ низова.

Тестирајте своју прилагођену цев

Да бисте видели своју прилагођену цев у акцији, покрените Ангулар развојни сервер. То можете учинити тако што ћете покренути следећу наредбу терминала:

ng serve

Отворите прегледач и идите на http://localhost: 4200. Требало би да видите трансформисани стринг приказан на страници:

Подигните своје Ангулар апликације на следећи ниво

Пипес су моћан алат Ангулар који вам омогућава да трансформишете и форматирате податке у вашој апликацији. Можете креирати прилагођене цеви које одговарају вашим специфичним потребама и учинити вашу Ангулар апликацију динамичнијом.

Други начин да своје Ангулар апликације подигнете на виши ниво је разумевање рутирања у Ангулару. Рутирање је кључни концепт који вам омогућава да контролишете како се корисници крећу кроз вашу апликацију. Разумевањем рутирања, можете да направите апликације на једној страници које су једноставније и ефикасније.