Введение в трубы

Для тех, кто впервые заходит в мой блог: мы создаем онлайн-планировщик, похожий на Google Keep. Более подробно вы можете увидеть здесь: Серия руководств

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

Angular 2 поставляется с набором конвейеров, таких как DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe и PercentPipe. Все они сразу же доступны для использования в любом шаблоне.

Если вы работали на кассе со вчерашним кодом, то увидите, что у нас проблемы с печатью даты. Дата имеет неправильный формат. См. это на изображении ниже.

Чтобы исправить это, мы можем легко использовать встроенный доступный DatePipe. Однако давайте пойдем более длинным путем и создадим собственный канал, чтобы решить эту проблему. Это даст нам представление о построении труб.

Откройте общую папку и создайте новый файл с именем: sd.date.pipe.ts

код sd.date.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'sddate'})
export class SDDatePipe implements PipeTransform {
  private days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 
                  'Thursday', 'Friday', 'Saturday'];
  private months = ['January', 'Feburary', 'March', 
                    'April', 'May', 'June', 'July', 
                    'August', 'September', 'October', 
                    'November', 'December'];
  private getDateSuffix(date: number) {
      let suffixValue = 'th';
      
      switch(date) {
          case 1:
          case 21:
          case 31:
            suffixValue = 'st';
            break;
          case 2:
          case 22:
            suffixValue = 'nd';
            break;
          case 3:
          case 23:
            suffixValue = 'rd';
            break;
      }
    return suffixValue;
  }

// Transform the value 
transform(value: Date, args: string[]): any {
    if (!value) return value;
    return this.days[value.getDay()] + ', ' + value.getDate() +    
                    this.getDateSuffix(value.getDate()) + ' ' + 
                    this.months[value.getMonth()] + ' ' + 
                    value.getFullYear();
  }
}

Мы импортируем: класс Pipe и интерфейс PipeTransform. Когда мы используем канал в любом шаблоне, значение приходит к методу transform. Там мы можем изменить значение.

Код довольно прямолинеен. Мы получаем значение в виде Дата и форматируем значение в формате «День, Дата (с суффиксом)Месяц Год».

Теперь сделайте его доступным для всего приложения, давайте объявим и экспортируем его из общего модуля.

Откройте файл common.module.ts и обновите код:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { SDFlexDirective } from './sd.flex.directive';
import { SDTextAlignCenterDirective } from './sd.text.center.directive';
import { SDLayoutDirective } from './sd.layout.directive';
import { SDLayoutWrapDirective } from './sd.layout.wrap.directive';
import { SDDatePipe } from './sd.date.pipe';
@NgModule({
    declarations: [ SDFlexDirective, SDTextAlignCenterDirective, SDLayoutDirective, SDLayoutWrapDirective, SDDatePipe],
    exports: [ SDFlexDirective, SDTextAlignCenterDirective, SDLayoutDirective, SDLayoutWrapDirective, SDDatePipe ]
})
export class SDCommonModule {
static forRoot(): ModuleWithProviders {
        return {
            ngModule: SDCommonModule
        };
    }
}

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

Чтобы использовать канал в шаблоне HTML, код очень прост. Обновите код в файле planner.header.component.html.

<div class="sd-planner-header">
    <h1>Planner</h1>
    <span class="subtitle">{{selectedDate | sddate}}</span>
</div>

Вот и все, и теперь, если вы запустите приложение, вы увидите отформатированный вывод.

Скачать код дня №8:



Ветвь дня №8 — CodeSnooker/silver-doe
silver-doe — онлайн-планировщикgithub.com



Я думаю, что мы немного отстаем от нашего графика. С завтрашнего дня мы будем пропускать некоторые концепции, которые мы уже обсуждали. Вы всегда можете получить доступ к коду по дням из конкретной ветки дня. Теперь я объясню новые концепции, которые я изучу, и буду больше работать над кодированием, а не над обсуждениями. Мы должны закончить базовое приложение в течение следующих 7 дней, а затем начать работу над Firebase для хранения и доступа в реальном времени.

Ссылки на путешествие: