Свеобухватни водич за цеви у Ангулару

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

Шта су цеви у Ангулару?

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

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

Ангулар обезбеђује неколико уграђених цеви укључујући ДатеПипе, УпперЦасеПипе, ЛоверЦасеПипе, ЦурренциПипе, ДецималПипе, ПерцентПипе, ЈсонПипе, СлицеПипе, и АсинцПипе. Такође пружа функционалност за креирање прилагођених цеви.

Свака уграђена угаона цев има јединствену функцију и може вам помоћи да трансформишете податке.

ДатеПипе

Тхе ДатеПипе формати и прикази ваше варијабле датума и времена у одређеном формату, с обзиром на ваш локал. За разлику од других оквира који захтевају ЈаваСцрипт пакети за форматирање датума и времена, Ангулар користи ДатеПипе. Користити ДатеПипе у својој апликацији, додајте симбол цеви (|) иза којег следи датум и све додатне параметре.

На пример:

<p>Today's date is {{ currentDate | date }}p>

У овом примеру, прођете Тренутни датум променљива кроз ДатеПипе, који га затим форматира према подразумеваном формату датума. Ви дефинишете Тренутни датум променљиву у ТипеСцрипт датотеци ваше компоненте.

Ево примера:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

Такође можете проследити додатне параметре у ДатеПипе да прилагодите излаз:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

Блок кода изнад је прошао схортДате параметар за ДатеПипе. Ово говори о ДатеПипе да форматирате датум користећи кратки формат датума. Поред схортДате параметар, можете конфигурисати ДатеПипе користећи различите параметре, укључујући з, лонгДате, и прилагођени формати датума као што су дд/ММ/ГГ.

УпперЦасеПипе и ЛоверЦасеПипе

Тхе УпперЦасеПипе и ЛоверЦасеПипе трансформишите своје текстове. Своје текстове претварате у велика слова користећи УпперЦасеПипе и малим словима користећи ЛоверЦасеПипе.

Да бисте користили УпперЦасеПипе и ЛоверЦасеПипе, додајте симбол цеви (|) иза којег следи мала слова да користим ЛоверЦасеПипе или велика слова да користим УпперЦасеПипе.

Испод је пример како да користите УпперЦасеПипе и ЛоверЦасеПипе:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

ЦурренциПипе

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

На пример:

<p>{{ number | currency }}p>

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

Ево примера:

<p>{{ number | currency: 'GBP' }}p>

Ево, пролазите кроз ГБП параметар за ЦурренциПипе. Ово осигурава да се број променљива се претвара у валуту британске фунте.

ДецималПипе и ПерцентПипе

Тхе ДецималПипе претвара ваше бројеве у децимале, док је ПерцентПипе претвара ваше бројеве у проценте.

Да бисте користили ДецималПипе, користите симбол луле иза којег следи број и додатни параметри. Да бисте користили ПерцентПипе, урадите исто, али замените број са проценат без додатних параметара.

На пример:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

Додатни параметри су прослеђени на ДецималПипе контролисати број приказаних целих и разломака цифара. Тхе 1 параметар специфицира да треба да постоји најмање једна цела цифра. За поређење, 2.3 параметар одређује да треба да постоје најмање две и највише три разломке.

ЈсонПипе

Тхе ЈсонПипе је уграђена цев која претвара податке у ЈСОН формат стринга. Углавном се користи у сврхе отклањања грешака. Можете користити ЈсонПипе и на објектима и на низовима.

Синтакса за коришћење ЈсонПипе је као што следи:

{{ expression | json }}

овде, израз су подаци које желите да конвертујете у ЈСОН формат. Оператор цеви (|) примењује ЈсонПипе до израза.

На пример, дефинишите објекат и низ у вашој компоненти:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

Блок кода изнад дефинише а корисник објекат и а профиле низ. Сада можете користити ЈсонПипе да конвертујете објекат и низ у ЈСОН.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

Ево, ЈсонПипе ће претворити корисник објекат и профиле низ у ЈСОН стринг, који можете брзо да прегледате у својим шаблонима током развоја или отклањања грешака.

СлицеПипе

Тхе СлицеПипе је веома сличан ЈаваСцрипт-у слице() методом. Тхе СлицеПипе форматира низове или стрингове тако што извлачи њихове елементе да би креирао нове низове или стрингове.

Да бисте користили СлицеПипе, користите симбол луле иза којег следи кришка и два параметра, почетни и крајњи индекс. Почетни индекс је позиција у низу или низу где ће цев почети да издваја елементе, а завршни индекс је место где ће цев престати да извлачи елементе.

Ево примера како да користите СлицеПипе:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

У овом примеру, СлицеПипе ће издвојити прва два елемента из низ променљива, елемент са индексом 0 и елемент са индексом 1. Даље, извући ће први елемент из низ променљива. Тхе СлицеПипе је корисно када желите да прикажете само део података у шаблону.

АсинцПипе

АсинцПипе је уграђена Ангулар цев која се аутоматски пријављује и одјављује на Обсервабле или Промисе. Враћа најновију вредност коју емитује Обсервабле или Промисе.

Синтакса за коришћење АсинцПипе је као што следи:

{{ expression | async }}

Овде је израз Обсервабле или Промисе на који желите да се претплатите.

На пример:

let numbers = of(1, 2, 3, 4, 5);

Можете користити АсинцПипе да бисте се претплатили на овај Обсервабле и приказали најновију емитовану вредност овако:

<p>{{ numbers | async }}p>

Овај блок кода ће избацити најновији број који емитује Обсервабле. АсинцПипе је веома корисно када рукујете асинхроним операцијама у вашим шаблонима. Аутоматски се претплаћује на Обсервабле или Промисе када се компонента иницијализује и отказује претплату када се уништи.

Цхаининг Пипес ин Ангулар

Можете повезати цеви заједно да бисте извршили више трансформација у једном изразу. Уланчавање цеви је једноставно као коришћење бројних оператора цеви (|) у једном изразу. Излаз сваке цеви постаје улаз за следећу.

Ево основне синтаксе:

<p>{{ expression | pipe1 | pipe2 |... }}p>

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

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

Креирајте динамичке апликације помоћу цеви

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