Что такое параметризированная труба?
В Angular трубы (pipes) — это мощный инструмент для преобразования данных с помощью шаблонов. Они используются для изменения данных перед их отображением в пользовательском интерфейсе. Параметризированные трубы — это особый тип труб, которые принимают аргументы (параметры) для управления преобразованиями данных.
Пример создания параметризируемой трубы
Давайте создадим простую параметризированную трубу, которая будет изменять формат строки:
ng generate pipe capitalize
capitalize.pipe.ts и измените его следующим образом:import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
transform(value: string, allWords: boolean = false): string {
if (!value) return value;
return allWords
? value.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
: value.charAt(0).toUpperCase() + value.slice(1);
}
}
В этом коде труба
CapitalizePipe принимает строку и булевый параметр allWords. Если allWords истинный, вся строка будет преобразована так, что каждая первая буква каждого слова станет заглавной. Если аргумент не указан, заглавной станет только первая буква всей строки.import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<h1>{{ 'hello world' | capitalize }}</h1>
<h1>{{ 'hello world' | capitalize:true }}</h1>
`
})
export class ExampleComponent {}
В этом примере стандартная строка
'hello world' будет отображена как 'Hello world', а с параметром true — как 'Hello World'.Заключение
Параметризованные трубы в Angular дают возможность разработчикам более тонко контролировать, как данные отображаются в UI. Использование параметров расширяет функциональность труб и позволяет делать преобразования более адаптивными. Надеюсь, данный пример поможет вам лучше понять концепцию параметризованных труб в Angular!