Учебники

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

Октябрь 15, 2018

Angular 2 также имеет возможность создавать нестандартные трубы. Общий способ определения пользовательского канала заключается в следующем. 

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

Куда,

  • «Pipename» — это название трубы.

  • Pipeclass — это имя класса, назначенного для пользовательского канала.

  • Transform — это функция для работы с конвейером.

  • Параметры — это параметры, которые передаются в канал.

  • Returntype — это тип возврата канала.

«Pipename» — это название трубы.

Pipeclass — это имя класса, назначенного для пользовательского канала.

Transform — это функция для работы с конвейером.

Параметры — это параметры, которые передаются в канал.

Returntype — это тип возврата канала.

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

Шаг 1 — Сначала создайте файл с именем multiplier.pipe.ts.

мультипликатор

Шаг 2 — Поместите следующий код в созданный выше файл. 

import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}

Следующие пункты должны быть отмечены в отношении приведенного выше кода.

  • Сначала мы импортируем модули Pipe и PipeTransform.

  • Затем мы создаем трубу с именем «Multiplier».

  • Создание класса с именем MultiplierPipe, который реализует модуль PipeTransform.

  • Функция преобразования примет значение и несколько параметров и выведет умножение обоих чисел.

Сначала мы импортируем модули Pipe и PipeTransform.

Затем мы создаем трубу с именем «Multiplier».

Создание класса с именем MultiplierPipe, который реализует модуль PipeTransform.

Функция преобразования примет значение и несколько параметров и выведет умножение обоих чисел.

Шаг 3 — В файле app.component.ts поместите следующий код. 

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }

Примечание. В нашем шаблоне мы используем наш новый пользовательский канал.

Шаг 4. Убедитесь, что следующий код находится в файле app.module.ts. 

import {
   NgModule
} from '@angular/core';

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

О вышеприведенном коде необходимо отметить следующее.

  • Мы должны убедиться, что наш модуль MultiplierPipe включен.

  • Мы также должны убедиться, что он включен в раздел объявлений.

Мы должны убедиться, что наш модуль MultiplierPipe включен.

Мы также должны убедиться, что он включен в раздел объявлений.

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

38
Share: