Angular 2 - Özel Borular

Angular 2 ayrıca özel borular oluşturma olanağına da sahiptir. Özel bir boruyu tanımlamanın genel yolu aşağıdaki gibidir.

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

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

Nerede,

'Pipename' - Bu borunun adı.
Pipeclass - Bu, özel boruya atanan sınıfın adıdır.
Transform - Bu, boru ile çalışma işlevidir.
Parameters - Boruya geçen parametrelerdir.
Returntype - Bu borunun dönüş şeklidir.

2 sayıyı çarpan özel bir boru oluşturalım. Daha sonra bu boruyu bileşen sınıfımızda kullanacağız.

Step 1 - Önce multiplier.pipe.ts adlı bir dosya oluşturun.

Step 2 - Aşağıdaki kodu yukarıda oluşturulan dosyaya yerleştirin.

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 
   } 
}

Yukarıdaki kodla ilgili aşağıdaki noktalara dikkat edilmelidir.

İlk olarak Pipe ve PipeTransform modüllerini ithal ediyoruz.
Ardından 'Multiplier' adında bir Pipe oluşturuyoruz.
PipeTransform modülünü uygulayan MultiplierPipe adlı bir sınıf oluşturma.
Dönüşüm işlevi daha sonra değeri ve çoklu parametreyi alacak ve her iki sayının çarpımını çıkaracaktır.

Step 3 - app.component.ts dosyasına aşağıdaki kodu yerleştirin.

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

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

Note - Şablonumuzda yeni özel borumuzu kullanıyoruz.

Step 4 - Aşağıdaki kodun app.module.ts dosyasına yerleştirildiğinden emin olun.

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 {}

Yukarıdaki kodla ilgili aşağıdaki noktalara dikkat edilmelidir.

MultiplierPipe modülümüzü dahil ettiğimizden emin olmamız gerekiyor.
Ayrıca, bildirimler bölümüne dahil edilmesini sağlamamız gerekir.

Tüm kod değişikliklerini kaydettikten ve tarayıcıyı yeniledikten sonra, aşağıdaki çıktıyı alacaksınız.