Труби в Angular — це одна з фраз, з якою ви часто стикаєтесь, будуючи користувацькі інтерфейси за допомогою Angular. Що це таке і як вони працюють?
Angular входить до топ-5 найпопулярніших веб-фреймворків і технологій, заснованих на Опитування StackOverflow.
Модульна архітектура робить Angular улюбленцем розробників, дозволяючи їм розбивати програму на невеликі багаторазові компоненти. Модульну кодову базу легко підтримувати, а також покращує співпрацю. Двостороннє прив’язування даних, кросбраузерна сумісність, велика екосистема та спільнота – це інші причини, чому Angular є одним із найкращих інтерфейсних фреймворків.
У цій статті обговорюється, що таке канали в Angular, варіанти їх використання, різні типи вбудованих каналів і як створити власні канали в Angular.
Що таке труби в Angular?
Канали — це функція Angular, яка перетворює та форматує дані в програмі. Конвеєри просто приймають значення як вхід і повертають перетворене значення як вихід. Трансформація може бути різною, і вона може бути такою ж простою, як трансформація валюти чи дати або сортування чи фільтрування елементів зі списку.
Канали призначені для покращення взаємодії з користувачем, оскільки вони перетворюють дані та повертають значення, які користувачі можуть використовувати та легко взаємодіяти з ними. Труби в Angular можуть бути вбудованими або спеціальними. Незалежно від типу, це деякі з причин, чому ви повинні використовувати канали в Angular:
- Перетворення даних: це основне використання каналів в Angular. Канали призначені для перетворення даних, щоб те, що відображається користувачам, було читабельним.
- Читабельність коду та зручність обслуговування: більшість додатків створено за допомогою співпраці. Таким чином, ви повинні переконатися, що інші члени команди розуміють ваш код. Конвеєри роблять ваш код більш лаконічним і простим у обслуговуванні.
- Локалізація: ви можете локалізувати дані відповідно до цільового ринку. Наприклад, існують різні формати дати. Таким чином, ви можете використовувати DatePipe для форматування даних відповідно до локалі користувачів.
- Сортування та фільтрація даних: ви можете використовувати OrderPipe або FilterPipe для сортування чи фільтрування даних.
Види вбудованих труб в Кутові
Angular має різноманітні вбудовані труби призначені для різних цілей. Це приклади деяких, з якими ви зіткнетеся на своєму шляху розвитку.
- PercentPipe: це труба, яка використовується, коли ви хочете перетворити число на рядок відсотків.
- DatePipe: це канал для форматування значення дати на основі правил мови.
- LowerCasePipe: перетворюйте весь текст у нижній регістр за допомогою цієї вертикальної лінії.
- UpperCasePipe: Ви можете використовувати цю вертикальну лінію, коли хочете змінити весь текст на верхній регістр.
- CurrencyPipe: це ідеальний вибір, якщо ви хочете змінити число на рядок валюти на основі правил мови.
- DecimalPipe: цей канал використовує правила локалі для перетворення числа в рядок із десятковою комою.
Створюйте власні канали в Angular
Ми бачили вбудовані канали та випадки їх використання. Однак Angular підтримує спеціальні канали. Такі труби важливі, коли ви хочете досягти чогось, чого не можуть досягти вбудовані труби. Такі канали дозволяють розширити функціональність вашого додатку.
передумови
Перш ніж почати створювати власні канали в Angular, вам знадобиться наступне:
- Середовище виконання Node.js для вашої програми Angular. Ти можеш завантажити Node.js якщо у вас його немає.
- Розуміння того, як працює Angular
- Кутовий CLI для створення програми та виконання різних команд. Ви можете встановити його за допомогою цієї команди;
npm install -g @angular/cli
Виконайте наступні кроки, щоб створити користувацьку трубу в Angular:
#1. Створіть новий проект Angular. Ви можете скористатися цією командою, щоб почати:
нг нових труб
#2. Змініть каталог на створену програму та відкрийте її у своєму улюбленому редакторі коду. Я використовую VsCode. Ви можете виконувати ці команди
cd канали && код.
Папка вашого проекту буде схожою на цю;
#3. Створіть спеціальну трубу. Ви можете використати цю команду для створення нової спеціальної труби:
ng генерувати користувацький канал
Якщо ви перевірите папку проекту, ви помітите, що ці два файли були створені:
src/app/custom-pipe.pipe.spec.ts
src/app/custom-pipe.pipe.ts
#4. Визначте логіку каналу
Відкрийте файл custom-pipe.pipe.ts і ви знайдете цей код:
Тепер ми можемо створити просту логіку, де наш спеціальний канал додається до рядка.
Ви можете змінити вміст вашого файлу на;
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
transform(value: string): string[] {
return value.split('');
}
}
#5. Зареєструйте спеціальну трубу. Відкрийте файл app.module.ts і перевірте, чи є @NgModule, а потім — декорації.
Підтвердьте, що цей файл має цей код;
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]
})
export class AppModule { }
#6. Відкрийте app.component.html, видаліть весь вміст і додайте цей рядок;
<header>{{ '12345' | customPipe }}</header>
Запустіть сервер за допомогою цієї команди;
ng служити
Це те, що відображатиметься у вашому браузері;
Як з’єднати труби в Angular
Зв’язування каналів дозволяє виконувати кілька операцій за допомогою одного виразу. Ми використовуємо оператор труби ( | ), щоб комбінувати різні труби в Angular.
Ми можемо ланцюгувати труби з наступних причин:
- З’єднані канали сприяють повторному використанню коду та модульності: ви можете налаштувати кожен канал на виконання певного перетворення, яке можна повторно використовувати у своїй програмі.
- Підтримуйте чистий код: шаблони ланцюжків дозволяють зберегти ваш код лаконічним, чистим і читабельним.
- Налаштування: ланцюжок труб дозволяє поєднувати власні та вбудовані труби та налаштовувати їх відповідно до ваших потреб.
- Складні перетворення: замість того, щоб налаштовувати один канал для виконання кількох перетворень, ви можете налаштувати кілька каналів для досягнення складних перетворень.
Ви можете з’єднати свою спеціальну трубу з іншою або вбудованою трубою. Я можу з’єднати трубу, яку ми створили раніше customPipe, із вбудованою трубою нижнього регістру. Ось як ми можемо це зробити:
<p>{{ dataValue | customPipe | lowercase }}</p>
Чисті проти нечистих труб
В Angular є два типи труб: чисті та нечисті
Чисті труби
Канали в Angular чисті за замовчуванням. Очікується, що чистий канал повертатиме той самий вихід для того самого входу. Очікується, що такий канал буде детермінованим і без стану.
Механізм виявлення змін Angular автоматично оптимізує чисті канали. Angular не запускає перетворення каналу повторно, якщо вхідні дані для чистого каналу не змінюються.
Ось як ви оголошуєте трубу чистою;
@Pipe({
name: 'uppercase',
pure: true
})
export class UppercasePipe {
transform(value: string): string {
return value.toUpperCase();
}
}
Як бачите, ми встановили для властивості pure декоратора @Pipe значення true.
Нечисті труби
Нечистий канал буде виконуватись щоразу, коли Angular виявить зміну. Така зміна не обов’язково має бути від вхідних даних. Нечисті канали відповідають ситуаціям, які потребують доступу до поточного стану програми. Доступ до бази даних або виконання HTTP-запиту є чудовими прикладами того, де можна використовувати нечисті канали.
Це приклад нечистої труби:
@Pipe({
name: 'sort',
pure: false
})
export class SortPipe {
transform(array: any[]): any[] {
return array.sort();
}
}
Як ви бачите, ми встановили для властивості pure декоратора @Pipe значення false, що робить наш канал нечистим.
Створення каналів у Angular: найкращі практики
- camelCase your pipes: Якщо ви помітили, я назвав свою трубу customPipe. Завжди використовуйте цей підхід, якщо ваш канал містить більше одного слова.
- Перевірте свої канали: створення каналу не гарантує, що він працюватиме. Завжди перевіряйте свої труби, щоб переконатися, що вони працюють належним чином. Ви можете автоматизувати цей процес за допомогою різних бібліотек.
- Уникайте складних каналів: вам може знадобитися, щоб один канал виконував кілька дій. Однак це не дуже гарний підхід, і найкращим способом є створення різних каналів для виконання різних дій.
- Використовуйте чисті канали: чистий канал завжди повертатиме той самий вихід із того самого входу. Angular може кешувати результати для чистих каналів, що призводить до покращення продуктивності та часу відгуку.
поширені запитання
Навіщо нам труби в Angular?
Конвеєри перетворюють і форматують дані в програмі. Канали приймають значення як вхід і повертають перетворене значення як вихід. Трансформація може бути різною, і вона може бути такою ж простою, як трансформація валюти чи дати або сортування чи фільтрування елементів зі списку.
Що таке труба на замовлення?
Це визначений користувачем канал, який ви створюєте для виконання настроюваних перетворень. Ви можете поєднати спеціальну трубу з вбудованими трубами за допомогою з’єднання труб.
Наведіть приклади вбудованих труб в Angular.
DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe і PercentPipe
Що таке ланцюг труб?
Пайп-чейнінг – це процес об’єднання декількох ланцюгів. Зв’язування каналів дозволяє виконувати кілька операцій за допомогою одного виразу. Ми використовуємо оператор труби ( | ), щоб комбінувати різні труби в Angular. Ви можете приєднати спеціальні труби до інших або приєднати їх до вбудованих труб
Висновок
Ми вважаємо, що тепер ви можете описати труби у своєму наступному інтерв’ю, оскільки це звичайне запитання в поширених питаннях Angular. Ми також розглянули різні вбудовані труби та те, як створити власні труби в Angular.
Спеціальні канали стануть у пригоді, якщо ви хочете задовольнити конкретні потреби або зробити свою програму більш динамічною. Однак ви повинні розуміти, як Angular працює під капотом, щоб створювати та використовувати спеціальні канали.
Ви також можете дослідити деякі бібліотеки інтерфейсу користувача Angular, щоб створити користувацький досвід світового рівня.
