Вы знаете, что такое угловые трубы? Как насчет кастомных пайпов Angular? Нет? Что ж, просто продолжайте читать, чтобы узнать!

Что такое угловые трубы?

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

Angular предоставляет множество встроенных каналов для общих преобразований данных, таких как перечисленные ниже:

  • DatePipe: создает значение данных на основе правил локали.
  • CurrencyPipe: преобразует число в текущую строку, что будет выполнено в соответствии с правилами локали.
  • PercentPipe: Преобразует число в строку процентов в соответствии с правилом локали.
  • LowerCasePipe: преобразует любой текст во все буквы нижнего регистра.

Угловые нестандартные трубы

Хорошо, теперь, когда вы знаете, что такое каналы Angular, давайте рассмотрим, что такое пользовательские каналы: Пользовательские каналы — это каналы, которые реализуют интерфейс PipeTransform и предоставляют возможность использовать пользовательские функции, которые не включены во встроенные каналы Angular. Например: вы можете создать настраиваемый канал, чтобы перевернуть строку, преобразовать ненадежный HTML в надежный и очищенный HTML и преобразовать любое число в значение валюты.

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

Давайте рассмотрим пример проекта Angular, в котором мы демонстрируем использование пользовательских каналов Angular.

Начните с создания нового проекта Angular и создания компонента с именем word-form.

Затем создайте папку с именем pipes по пути src/app и выполните следующую команду, чтобы создать канал с именем word-randomizer:

ng generate pipe word-randomizer

Внутри файла word-randomizer.pipe.ts мы можем добавить следующий код:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'wordRandomizer'
})
export class WordRandomizerPipe implements PipeTransform {
  transform(value: string, ...args: unknown[]): unknown {
    if(value == ""){
      return "";
    }
    return this.scramble(value);
  }
  scramble(a: string){
    return a.split('').sort(function(){return 0.5-Math.random()}).join('');
  }
}

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

Далее создадим компонент word-form, добавив следующий код в файл word-form.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-word-form',
  templateUrl: './word-form.component.html',
  styleUrls: ['./word-form.component.css']
})
export class WordFormComponent implements OnInit {
  wordForm: FormGroup;
  randomWord: string = "";
  showRandomWord: boolean = false;
  constructor(private fb: FormBuilder) { }
  get f() { return this.wordForm.controls; }
  ngOnInit(): void {
    this.wordForm = this.fb.group({
      wordInput: [null, Validators.required]
    });
  }
  onSubmit(){
    if(this.wordForm.valid){
      this.randomWord = this.f.wordInput.value;
      this.showRandomWord = true;
    }
  }
}

И следующий код для файла word-form.component.html:

<form class="form" [formGroup]="wordForm" (ngSubmit)="onSubmit()">
    <label for="wordInput" >Enter a word: </label>
    <br/>
    <input id="wordInput" name="wordInput" type="text" formControlName="wordInput" />
    <br/>
    <br/>
    <input type="submit" id="submitButton" />
    <h3 *ngIf="showRandomWord">Scrambled Word: {{ randomWord | wordRandomizer }}</h3>
</form>

Краткое объяснение того, что мы только что добавили: форма, содержащая один текстовый ввод вместе с кнопкой отправки, будет создана в компоненте word-form. Как только пользователь введет слово в текстовый ввод и нажмет кнопку отправки, отправленное слово будет преобразовано с помощью пользовательского конвейера wordRandomizer и выведено как зашифрованная версия исходного слова. Это зашифрованное слово появится под кнопкой отправки при отправке формы.

Наконец, не забудьте включить канал WordRandomizerPipe в файл app.module.ts, чтобы наше приложение Angular могло ссылаться на него, когда мы ссылаемся на него в файле word-form.component.html, например:

@NgModule({
  declarations: [
    AppComponent,
    WordRandomizerPipe,
    WordFormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Теперь все, что нам нужно сделать, это запустить наше приложение Angular через npm start и перейти к http://localhost:4200 в нашем браузере!🚀

Вот труба wordRandomizer в действии:

Заключение

Поздравляем! Теперь вы знаете, что такое каналы Angular и как реализовать собственные каналы в приложении Angular. Если вам нужен доступ к исходному коду этого приложения, вы можете получить к нему доступ, посетив ссылка на GitHub.

Ну вот и все для этого поста! Спасибо, что следили за этой статьей, и если у вас есть какие-либо вопросы или проблемы, не стесняйтесь оставлять комментарии в этом посте, и я свяжусь с вами, когда найду время.

Если вы нашли эту статью полезной, поделитесь ею и обязательно подпишитесь на меня в Twitter и GitHub, свяжитесь со мной в LinkedIn, подпишитесь на мой канал Youtube, и если вам когда-либо понадобится фриланс Разработчик программного обеспечения, пожалуйста, свяжитесь со мной через Upwork, нажав здесь.