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.