Трубы в угловом

Трубы в угловом

Как мы знаем, Angular — популярный веб-фреймворк для создания современных веб-приложений, предлагающий разработчикам множество мощных функций.

Одной из таких функций является pipes, которая обеспечивает простой и эффективный способ преобразования данных перед их отображением в представлении.

В этой статье мы предоставим всесторонний обзор pipes в Angular, включая то, что они из себя представляют, как их использовать, а также некоторые примеры распространенных вариантов использования.

Оглавление:

• Введение
• Чистые и нечистые трубы
• Встроенные трубы
• Создание пользовательских труб
• Соединение труб
• Резюме ключевых моментов
• Лучшие практики использования Pipes в Angular
• Заключительные мысли и рекомендации

Мы рассмотрим каждую концепцию, связанную с пониманием и реализацией Pipes в Angular.

Итак, приступим.

1. Введение в пайпы в Angular

Каналы в Angular — это функция, позволяющая преобразовывать данные в приложении перед их отображением пользователю.

Pipes используются для данных format, filter и sort, и их можно использовать как с template-driven, так и с reactive forms, а также с другими Angular components и services..

2. Чистые и нечистые трубы

В Angular каналы могут быть как чистыми, так и нечистыми.

Чистые каналы спроектированы так, чтобы быть stateless, что означает, что они не имеют никакого внутреннего состояния, которое могло бы повлиять на их вывод.

Вместо этого они берут входные данные и возвращают преобразованные выходные данные. Чистые каналы также запоминаются, что означает, что если входные данные не изменились с момента последнего вызова канала, канал больше не будет выполняться.

Преимущество использования чистых каналов заключается в том, что они могут помочь повысить производительность вашего приложения Angular, поскольку они выполняются только при необходимости. Кроме того, чистые каналы могут помочь предотвратить ненужные циклы обнаружения изменений, что может повысить общую производительность приложения.

Чтобы создать чистый канал в Angular, вам нужно добавить параметр pure: true в декоратор @Pipe, например:

@Pipe({
  name: 'myPurePipe',
  pure: true
})

По умолчанию каналы в Angular имеют номер impure, что означает, что они выполняются при каждом цикле обнаружения изменений.

Нечистые каналы могут быть полезны в некоторых случаях, например, когда вам нужно выполнить тяжелые вычисления или получить данные из внешнего API.

Однако, как правило, recommended рекомендуется использовать чистые конвейеры, когда это возможно, для повышения производительности и предотвращения ненужных циклов обнаружения изменений.

3. Встроенные каналы в Angular

Angular поставляется с набором встроенных пайпов, которые вы можете использовать в своих шаблонах. Вот некоторые из наиболее часто используемых встроенных пайпов в Angular:

• Валютная труба
• Дата Труба
• Джсон Пайп
• Нижняя труба
• Верхняя труба
• Процентпайп
• SlicePipe
• НазваниеCasePipe
• Асинкпайп

1. Валютная труба

CurrencyPipe — это встроенный канал в Angular, который используется для форматирования числа как денежного значения.

Он позволяет отображать значения валюты в формате user-friendly с учетом символа валюты decimal separator и группировки разделителей на основе текущего locale.

Вот пример использования CurrencyPipe в Angular:

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  price: number = 12345.6789;
}

приложение.component.html:

<div>
  <h2>Using CurrencyPipe</h2>
  <p>Price: {{ price | currency }}</p>
  <p>Price: {{ price | currency:'EUR':'symbol-narrow':'4.2-2' }}</p>
</div>

В приведенном выше примере у нас есть переменная price, которая содержит числовое значение 12345.6789. Затем мы используем канал currency для форматирования переменной price как денежного значения в шаблоне.

Первое использование канала — с настройками по умолчанию. Он отформатирует переменную price с валютой по умолчанию для текущей локали.

Второе использование канала включает некоторые дополнительные параметры. Он форматирует переменную price с символом валюты EUR, узким символом и строкой формата 4.2-2. Строка формата указывает, что число должно иметь не менее 4 цифр перед десятичным разделителем, не более 2 цифр после десятичного разделителя и должно использовать десятичный разделитель и разделитель группировки языкового стандарта.

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

Using CurrencyPipe
Price: $12,345.68
Price: €12,345.68

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

2. Канал даты

DatePipe — это встроенный канал в Angular, который используется для форматирования объекта даты.

Он предоставляет способ отображения значений даты в удобном для пользователя формате на основе текущей локали.

Вот пример использования DatePipe в Angular:

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentDate: Date = new Date();
}

приложение.компонент.html:

<div>
  <h2>Using DatePipe</h2>
  <p>Current date: {{ currentDate | date }}</p>
  <p>Current date: {{ currentDate | date:'fullDate' }}</p>
  <p>Current date: {{ currentDate | date:'short' }}</p>
</div>

В приведенном выше примере у нас есть переменная currentDate, которая содержит текущий объект даты. Затем мы используем канал date для форматирования переменной currentDate как значения даты в шаблоне.

Первое использование канала — с настройками по умолчанию. Он отформатирует переменную currentDate с форматом даты по умолчанию для текущей локали.

Второе использование канала включает строку формата fullDate. Это отформатирует переменную currentDate как полную строку даты, например «Вторник, 8 марта 2022 года».

Третье использование канала включает строку формата short. Это отформатирует переменную currentDate как короткую строку даты, например «3/8/22».

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

Using DatePipe
Current date: Mar 3, 2023
Current date: Friday, March 3, 2023
Current date: 3/3/23, 12:17 AM

Первая строка вывода показывает отформатированное по умолчанию значение даты для текущей локали. Вторая строка вывода показывает переменную currentDate, отформатированную как полную строку даты. Третья строка вывода показывает переменную currentDate в формате короткой строки даты.

3.Json Pipe

JsonPipe — это встроенный канал в Angular, который используется для преобразования объекта в строку JSON.

Он предоставляет способ отображения значений объекта в форматированной строке JSON.

Вот пример использования JsonPipe в Angular:

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myObject: any = {
    name: 'John',
    age: 30,
    email: '[email protected]'
  };
}

приложение.компонент.html:

<div>
  <h2>Using JsonPipe</h2>
  <pre>{{ myObject | json }}</pre>
</div>

В приведенном выше примере у нас есть переменная myObject, которая содержит объект с именем, возрастом и адресом электронной почты. Затем мы используем канал json для преобразования переменной myObject в строку JSON.

Тег pre используется для сохранения пробелов и форматирования в выводе.

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

Using JsonPipe
{
  "name": "John",
  "age": 30,
  "email": "[email protected]"
}

Вывод показывает переменную myObject, преобразованную в строку JSON с отформатированными пробелами. Это может быть полезно для отладки и отображения значений объекта в читаемом формате.

4. Строка в нижнем регистре

LowerCasePipe — это встроенный канал в Angular, который используется для преобразования строки в строку lowercased.

Вот пример использования LowerCasePipe в Angular:

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myString: string = 'This is a STRING in Mixed CASE';
}

приложение.component.html:

<div>
  <h2>Using LowerCasePipe</h2>
  <p>Original String: {{ myString }}</p>
  <p>Lowercased String: {{ myString | lowercase }}</p>
</div>

В приведенном выше примере у нас есть переменная myString, которая содержит строковое значение в регистре mixed. Затем мы используем канал lowercase для преобразования переменной myString в строку lowercased.

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

Using LowerCasePipe
Original String: This is a STRING in Mixed CASE
Lowercased String: this is a string in mixed case

Первая строка вывода показывает строковое значение original. Вторая выходная строка показывает преобразованное строковое значение после использования канала lowercase. Обратите внимание, что все символы в строке были преобразованы в нижний регистр.

5. Заглавная черта

UpperCasePipe — это встроенный канал в Angular, который используется для преобразования строки в строку в верхнем регистре.

Вот пример использования UpperCasePipe в Angular:

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myString: string = 'This is a STRING in Mixed CASE';
}

приложение.компонент.html:

<div>
  <h2>Using UpperCasePipe</h2>
  <p>Original String: {{ myString }}</p>
  <p>Uppercased String: {{ myString | uppercase }}</p>
</div>

В приведенном выше примере у нас есть переменная myString, которая содержит строковое значение в регистре mixed. Затем мы используем канал uppercase для преобразования переменной myString в строку uppercased.

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

Using UpperCasePipe
Original String: This is a STRING in Mixed CASE
Uppercased String: THIS IS A STRING IN MIXED CASE

Первая строка вывода показывает исходное строковое значение. Вторая выходная строка показывает преобразованное строковое значение после использования канала uppercase. Обратите внимание, что все символы в строке были преобразованы в верхний регистр.

5. Процентная трубка

PercentPipe — это встроенный канал в Angular, который используется для преобразования числа в процентное значение.

Вот пример использования PercentPipe в Angular:

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myNumber: number = 0.23;
}

приложение.компонент.html:

<div>
  <h2>Using PercentPipe</h2>
  <p>Original Number: {{ myNumber }}</p>
  <p>Percentage Value: {{ myNumber | percent }}</p>
</div>

В приведенном выше примере у нас есть переменная myNumber, которая содержит числовое значение. Затем мы используем канал percent для преобразования переменной myNumber в процентное значение.

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

Using PercentPipe
Original Number: 0.23
Percentage Value: 23%

Первая строка вывода показывает исходное числовое значение. Вторая выходная строка показывает преобразованное процентное значение после использования канала percent. Обратите внимание, что десятичное значение умножается на 100, а в конце значения добавляется знак процента.

6. Разрезать трубу

SlicePipe — это встроенный канал в Angular, который используется для создания нового массива или строки, содержащей часть существующего массива или строки.

Вот пример использования SlicePipe в Angular:

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myArray: any[] = ['apple', 'banana', 'orange', 'grape', 'mango'];
  myString: string = 'This is a long string.';
}

приложение.component.html:

<div>
  <h2>Using SlicePipe on Array</h2>
  <p>Original Array: {{ myArray }}</p>
  <p>Sliced Array: {{ myArray | slice:1:3 }}</p>
</div>
<div>
  <h2>Using SlicePipe on String</h2>
  <p>Original String: {{ myString }}</p>
  <p>Sliced String: {{ myString | slice:0:7 }}</p>
</div>

В приведенном выше примере у нас есть переменная myArray, содержащая массив фруктов, и переменная mySecodString, содержащая строковое значение. Затем мы используем конвейер slice для создания нового массива или строки, содержащей часть исходного массива или строки.

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

Using SlicePipe on Array

Original Array: apple,banana,orange,grape,mango
Sliced Array: banana,orange

Using SlicePipe on String

Original String: This is a long string.
Sliced String: This is

Первый раздел вывода показывает исходное значение массива и значение массива, нарезанное с использованием канала slice. Обратите внимание, что срез начинается с индекса 1 и заканчивается индексом 3, что означает, что массив срезов будет содержать элементы с индексом 1 и индексом 2 (не включая индекс 3). Второй раздел вывода показывает исходное строковое значение и нарезанное строковое значение с использованием канала slice. Обратите внимание, что срез начинается с индекса 0 и заканчивается индексом 7, что означает, что нарезанная строка будет содержать символы с индексом от 0 до индекса 6 (не включая индекс 7).

7. Канал TitleCase

TitleCasePipe — это встроенный канал в Angular, который используется для преобразования строки в регистр заголовка, что означает, что первая буква каждого слова заглавная.

Вот пример использования TitleCasePipe в Angular:

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: './app.component.html'
})
export class AppComponent {
  myString: string = 'this is a sentence in lowercase.';
}

В приведенном выше примере у нас есть переменная myString, которая содержит строковое значение. Затем мы используем канал titlecase для преобразования переменной myString в регистр заголовка.

<h2>Using TitleCasePipe</h2>
<p>Original String: {{ myString }}</p>
<p>Transformed String: {{ myString | titlecase }}</p>

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

Using TitleCasePipe
Original String: this is a sentence in lowercase.
Transformed String: This Is A Sentence In Lowercase.

Первая строка вывода показывает исходное строковое значение. Вторая выходная строка показывает преобразованное значение регистра заголовков после использования канала titlecase.

Обратите внимание, что первая буква каждого слова заглавная.

8. Асинхронный конвейер

AsyncPipe — это встроенный канал в Angular, который используется для обработки асинхронных потоков данных. Он обычно используется для подписки на наблюдаемые объекты или промисы и отображения выданных значений в представлении.

Вот пример использования AsyncPipe в Angular:

app.component.ts:

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
@Component({
  selector: 'app-root',
  template: './app.component.html'
})
export class AppComponent {
  myObservable$: Observable<number> = of(42);
  myPromise$: Promise<string> = Promise.resolve('Hello World!');
}

В приведенном выше примере у нас есть переменная myObservable$, содержащая наблюдаемую, которая выдает число 42. У нас также есть переменная myPromise$, которая содержит обещание, разрешающееся в строку Hello World!. Затем мы используем канал async для подписки на эти наблюдаемые и промисы и отображения выданных значений в представлении.

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

    <h2>Using AsyncPipe with Observable</h2>
    <p>{{ myObservable$ | async }}</p>
    <h2>Using AsyncPipe with Promise</h2>
    <p>{{ myPromise$ | async }}</p>
Using AsyncPipe with Observable
42
Using AsyncPipe with Promise
Hello World!

Первый раздел вывода показывает значение, испускаемое наблюдаемым с использованием канала async. Второй раздел вывода показывает значение, разрешенное промисом с использованием канала async. Обратите внимание, что канал async автоматически подписывается на observables и promises и отменяет подписку, когда компонент уничтожается, чтобы предотвратить утечку памяти.

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

Пользовательские каналы используются для преобразования данных в приложении Angular.

Вы можете создавать собственные каналы в Angular, определяя новый класс и реализуя интерфейс PipeTransform. Интерфейс PipeTransform содержит единственный метод transform, который принимает входное значение и возвращает преобразованное значение.

custom.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'filterByLength'})
export class CustomPipe implements PipeTransform {
  transform(values: string[], minLength: number): string[] {
    return values.filter(value => value.length >= minLength);
  }
}

В приведенном выше примере мы определяем класс CustomPipe, реализующий интерфейс PipeTransform. Метод transform() принимает два аргумента — массив строк и минимальную длину. Затем он отфильтровывает в массиве все строки, длина которых больше или равна указанной.

Затем мы украшаем класс декоратором @Pipe и предоставляем свойство name, чтобы дать каналу имя. Это имя мы будем использовать для ссылки на канал в наших шаблонах.

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { CustomPipe } from "./custom.pipe";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent, CustomPipe],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: './app.component.html'
})
export class AppComponent {
  values: string[] = ['apple', 'banana', 'carrot', 'date'];
}
    <h2>Using Custom Pipe</h2>
    <ul>
      <li *ngFor="let value of values | filterByLength: 5">{{ value }}</li>
    </ul>

В приведенном выше примере у нас есть массив values, содержащий несколько строк. Затем мы используем канал filterByLength, чтобы отфильтровать любые строки короче 5 символов. Мы используем директиву *ngFor для циклического просмотра отфильтрованных значений и отображения их в неупорядоченном списке.

Когда приведенный выше код будет запущен, он отобразит следующий вывод:

Using Custom Pipe
apple
banana
carrot

Вывод показывает две строки из массива values, которые длиннее или равны 5 символам.

5.Соединение труб в цепочку

Цепочка каналов в Angular включает последовательное применение нескольких каналов для преобразования данных в шаблон. Вы можете создавать цепочки каналов, используя оператор канала (|) несколько раз, при этом каждый канал представляет собой отдельное преобразование.

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

{{ myDate | date:'medium' | uppercase }}

В этом примере значение myDate сначала передается через конвейер date, который форматирует дату с использованием формата «средний». Полученное значение затем передается через канал uppercase, который преобразует значение в верхний регистр.

Важно отметить, что объединение слишком большого количества каналов может повлиять на производительность, особенно при работе с большими наборами данных. Если вы обнаружите, что в шаблоне несколько каналов объединены в цепочку, рассмотрите возможность переноса логики преобразования в пользовательский канал или преобразования данных в компоненте перед их передачей в шаблон. Это может помочь повысить производительность и упростить чтение и обслуживание кода.

6. Обзор ключевых моментов

• Pipes используются для преобразования данных в шаблонах Angular перед их отображением пользователю.
• Angular поставляется с несколькими встроенными каналами, такими как CurrencyPipe, DatePipe, DecimalPipe, UpperCasePipe, LowerCasePipe, TitleCasePipe и AsyncPipe.
• Трубы можно использовать в шаблонных выражениях с символом |.
• Каналы также могут принимать один или несколько аргументов, которые передаются после символа |.
• Вы можете создать свои собственные каналы, определив класс, реализующий интерфейс PipeTransform, и добавив его в массив declarations вашего модуля.
• При определении пользовательского канала вы должны указать имя канала, которое можно использовать в шаблоне, и функцию преобразования, которая принимает входные данные и любые аргументы и возвращает преобразованные данные.
• Чтобы использовать собственный канал в шаблоне, вы должны добавить имя канала после символа | и любые аргументы после двоеточия :.
• При работе с каналами важно убедиться, что вы используете правильное имя канала и аргументы и что вы передаете правильные входные данные в канал. Если канал не работает должным образом, вам может потребоваться проверить эти вещи, чтобы найти проблему.

7. Рекомендации по использованию конвейеров

Вот несколько рекомендаций, которые следует учитывать при использовании каналов в Angular:

1. По возможности используйте встроенные каналы — Angular предоставляет ряд встроенных каналов для распространенных преобразований, таких как DatePipe, CurrencyPipe и DecimalPipe. Эти трубы были оптимизированы для производительности и должны использоваться, когда это возможно, чтобы избежать ненужных накладных расходов.
2. Избегайте объединения слишком большого количества каналов. Объединение нескольких каналов может вызвать проблемы с производительностью, особенно при работе с большими наборами данных. Вместо этого рассмотрите возможность использования пользовательского канала или преобразования данных в компоненте перед их передачей в шаблон.
3. Помните о производительности. Конвейеры могут быть дорогостоящими операциями, особенно при работе с большими наборами данных. Чтобы избежать проблем с производительностью, постарайтесь ограничить количество вызовов канала и избегайте выполнения тяжелых вычислений внутри канала.
4. Создавайте каналы простыми. Каналы должны быть простыми и сосредоточены на одном преобразовании. Избегайте создания каналов, которые делают слишком много или имеют сложную логику, так как это может затруднить их обслуживание и отладку.
5. По возможности используйте чистые каналы. Чистые каналы вызываются только при изменении их входных данных, что может повысить производительность. При создании собственного пайпа подумайте о том, чтобы сделать его чистым, если это возможно.
6. Учитывайте типы данных. Каналы работают по-разному в зависимости от типа преобразуемых данных. Например, DatePipe ожидает объект Date в качестве входных данных, а CurrencyPipe ожидает число. Убедитесь, что вы передаете правильный тип данных в канал, чтобы избежать неожиданного поведения.
7. Проверьте свои каналы. При создании пользовательского канала обязательно тщательно протестируйте его, чтобы убедиться, что он работает должным образом. Это может включать модульное тестирование логики преобразования пайпа, а также его тестирование в контексте компонента.

Следуя этим рекомендациям, вы можете гарантировать, что ваши каналы будут performant, maintainable и effective при преобразовании данных в приложениях Angular.

8. Заключительные мысли и рекомендации

В целом, pipes — это мощная функция в Angular, которая позволяет вам преобразовывать данные в шаблонах, не требуя дополнительного кода в компоненте.

Используя built-in pipes или создавая собственные каналы, вы можете форматировать dates, numbers и strings, filter data, а также выполнять другие полезные преобразования.

При использовании каналов в приложениях Angular важно помнить о performance.

Избегайте объединения слишком большого количества каналов и помните о сложных вычислениях внутри каналов, так как это может повлиять на производительность.

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

В качестве последней рекомендации я предлагаю потратить некоторое время на изучение встроенных каналов в Angular и поэкспериментировать с созданием собственных пользовательских каналов. Эффективно используя каналы, вы можете создавать более динамичные и привлекательные пользовательские интерфейсы для своих приложений Angular.

Вы можете увидеть живой пример на CodeSandBox.

И вот оно! Большое спасибо за упорство до конца этой статьи! Надеюсь, вы нашли это полезным. Вы можете подписаться на меня в Medium, Twitter, Linkedin и Facebook.

Если у вас есть вопросы, не стесняйтесь спросить.

Вы можете поддержать меня, купив мне кофе

Оставайтесь с нами для более интересных фрагментов программирования.