Что такое параметризированная труба?

В Angular трубы (pipes) — это мощный инструмент для преобразования данных с помощью шаблонов. Они используются для изменения данных перед их отображением в пользовательском интерфейсе. Параметризированные трубы — это особый тип труб, которые принимают аргументы (параметры) для управления преобразованиями данных.

Пример создания параметризируемой трубы

Давайте создадим простую параметризированную трубу, которая будет изменять формат строки:

1. Создание трубы: В терминале вашего проекта Angular выполните команду для создания трубы:

   ng generate pipe capitalize
   

2. Реализация логики трубы: Откройте файл 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 истинный, вся строка будет преобразована так, что каждая первая буква каждого слова станет заглавной. Если аргумент не указан, заглавной станет только первая буква всей строки.
3. Использование трубы в компоненте: Теперь, чтобы использовать эту трубу в шаблоне, добавьте ее в ваш компонент:

   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!