Что такое пайп (pipe
) в Angular? Разница между чистыми и нечистыми пайпами?
В Angular пайп (pipe) является механизмом для преобразования данных в шаблоне компонента. Пайпы используются для форматирования, фильтрации и преобразования значений перед их отображением.
Пайпы имеют два типа: чистые (pure) и нечистые (impure). Давайте рассмотрим их подробнее:
- Чистые пайпы (pure pipes):
- Чистые пайпы используются для преобразования данных, при этом они остаются неизменными, если входные значения не изменились.
- Они имеют иммутабельный подход и должны быть безопасными для кэширования.
- Если входные значения для чистого пайпа не изменяются, Angular не будет повторно вычислять результат преобразования, а будет использовать закэшированное значение.
- Чистые пайпы обычно используются для простых операций форматирования, таких как дата, валюта или преобразование регистра.
Вот пример использования чистого пайпа для форматирования даты:
import { Component } from '@angular/core'
@Component({
selector: 'app-example',
template: ` <p>{{ currentDate | date }}</p> `
})
export class ExampleComponent {
currentDate: Date = new Date()
}
- Нечистые пайпы (impure pipes):
- Нечистые пайпы вызываются при каждом обновлении компонента, даже если входные значения не изменились.
- Они не кэшируются и могут потреблять больше ресурсов.
- Нечистые пайпы могут выполнять более сложные операции, такие как сортировка, фильтрация или асинхронные вызовы.
Вот пример использования нечистого пайпа для фильтрации элементов списка:
import { Component } from '@angular/core'
@Component({
selector: 'app-example',
template: `
<ul>
<li *ngFor="let item of items | filterPipe">{{ item }}</li>
</ul>
`
})
export class ExampleComponent {
items: string[] = ['apple', 'banana', 'cherry', 'date']
}
import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'filterPipe',
pure: false
})
export class FilterPipe implements PipeTransform {
transform(items: string[]): string[] {
// Логика фильтрации
return items.filter((item) => item.startsWith('a'))
}
}
Разница между чистыми и нечистыми пайпами важна при проектировании и оптимизации приложения. В целом, рекомендуется использовать чистые пайпы, если это возможно, чтобы избежать ненужных вычислений и улучшить производительность. Нечистые пайпы следует использовать с осторожностью и только в случаях, когда это необходимо для выполнения более сложных операций.