Как да създадете персонализирани тръби в Angular

Тръбите са мощна функция на Angular, която ви позволява да трансформирате и форматирате данни във вашето приложение. Те предоставят удобен начин за манипулиране на данни, преди да ги покажете на потребителя, което прави вашето приложение по-динамично и удобно за потребителя.

Angular предлага разнообразие от вградени канали като DatePipe, CurrencyPipe и UpperCasePipe. Заедно с вградените канали, които Angular предлага, можете да създавате потребителски канали, за да трансформирате данни по какъвто и да е начин.

Настройте своя Angular проект

Преди да създадете персонализирани тръби, уверете се, че вие разберете тръбите в Angular. За да можете да настроите Angular проект, уверете се, че сте инсталирали Angular CLI на вашата машина. Можете да го инсталирате с npm (мениджър на пакети на възли).

Инсталирайте Angular CLI, като изпълните следната команда:

npm install -g @angular/cli

След това създайте нов Angular проект, като изпълните тази команда:

ng new my-app

След като създадете проекта, навигирайте до директорията на вашия проект и отворете вашето приложение във вашата IDE.

Създайте персонализирана тръба

Сега, след като сте настроили вашето Angular приложение, следващото нещо, което трябва да направите, е да създадете персонализирана тръба. За да създадете персонализирана тръба, трябва да генерирате нова с помощта на Angular CLI.

За да направите това, изпълнете следната команда в директорията на вашето приложение на терминала:

ng generate pipe customPipe

Тази команда ще генерира два файла с имена custom-pipe.pipe.ts и custom-pipe.pipe.spec.ts в src/приложение указател. Файлът custom-pipe.pipe.ts е TypeScript файл който съдържа кода за дефиниране на вашата персонализирана тръба. Ще използвате custom-pipe.pipe.spec.ts, за да изпълнявате тестове на персонализираната тръба.

В custom-pipe.pipe.ts файл, ще намерите тези редове код:

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

Този кодов блок импортира Тръба декоратор и PipeTransform интерфейс от @ъглово/ядро модул. Декораторът на тръба дефинира метаданните за тръбата, а класът на тръбата имплементира интерфейса PipeTransform.

В CustomPipePipe клас, вие внедрявате PipeTransform интерфейс, който изисква внедряване на трансформирам метод. Методът на трансформация е отговорен за трансформирането на входната стойност.

The трансформирам методът приема два параметъра, стойност и аргументи. Параметърът стойност представлява стойността на трансформация на канала, а параметърът args представлява незадължителни параметри, които може да искате да добавите.

Сега разбрахте шаблона на custom-pipe.pipe.ts файл, заменете кодовия блок по-горе с този код:

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

В този кодов блок, трансформирам методът отнема стойност параметър на типа низ като аргумент и връща масив от низове. Методът за трансформация разделя входния низ в масив от отделни знаци, използвайки разделяне метод и връща получения масив.

Интегриране на персонализираната тръба във вашето приложение

Успешно създадохте персонализираната си тръба и вече можете да я използвате във вашите Angular шаблони. Преди да използвате персонализирания канал във вашето приложение, импортирайте го и го декларирайте във вашето app.module.ts файл. За да направите това, заменете кода в app.module.ts със следното:

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 { }

Сега можете да използвате тръбата във вашите шаблони. Отвори app.component.html файл и добавете следния код:

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

В този пример използвате CustomPipe тръба за трансформиране на низа "ябълка" в низов масив.

Тествайте вашата персонализирана тръба

За да видите вашата персонализирана тръба в действие, стартирайте сървъра за разработка Angular. Можете да направите това, като изпълните следната терминална команда:

ng serve

Отворете браузъра си и отворете http://localhost: 4200. Трябва да видите трансформирания низ, показан на страницата:

Изведете своите Angular приложения на следващото ниво

Pipes са мощен инструмент на Angular, който ви позволява да трансформирате и форматирате данни във вашето приложение. Можете да създадете персонализирани тръби, за да отговарят на вашите специфични нужди и да направите вашето Angular приложение по-динамично.

Друг начин да изведете вашите Angular приложения на следващото ниво е да разберете маршрутизирането в Angular. Маршрутизирането е ключова концепция, която ви позволява да контролирате как потребителите навигират във вашето приложение. Като разбирате маршрутизирането, можете да създавате приложения с една страница, които са по-удобни за потребителя и ефективни.