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

Метод 1: встроенный верхний регистр
Первый метод, который мы рассмотрим, — это встроенный верхний регистр, который преобразует строку в верхний регистр. Это одна из наиболее часто используемых функций конвейера в Angular.

import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    <h1>{{ title | uppercase }}</h1>
  `
})
export class ExampleComponent {
  title = 'hello world';
}

Метод 2: создание пользовательского канала
Angular позволяет создавать собственные каналы в соответствии с вашими конкретными потребностями. Давайте создадим специальный канал под названием capitalize, в котором первая буква строки будет писаться с заглавной буквы.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

Чтобы использовать пользовательский канал в своем компоненте:

import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    <h1>{{ title | capitalize }}</h1>
  `
})
export class ExampleComponent {
  title = 'hello world';
}

Метод 3: объединение нескольких каналов
Каналы можно объединить вместе для выполнения нескольких преобразований значения. Давайте соединим каналы uppercaseи capitalize, чтобы преобразовать строку в верхний регистр и сделать ее первую букву заглавной.

import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    <h1>{{ title | uppercase | capitalize }}</h1>
  `
})
export class ExampleComponent {
  title = 'hello world';
}

Метод 4: использование параметров в каналах
Каналы также могут принимать параметры для настройки своего поведения. Давайте создадим собственный канал под названием truncate, который усекает строку до указанной длины.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, length: number): string {
    if (value.length > length) {
      return value.slice(0, length) + '...';
    }
    return value;
  }
}

Чтобы использовать пользовательский канал с параметром:

import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    <h1>{{ title | truncate: 10 }}</h1>
  `
})
export class ExampleComponent {
  title = 'hello world';
}

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