Winkel 2 - Benutzerdefinierte Rohre

Angular 2 bietet auch die Möglichkeit, benutzerdefinierte Rohre zu erstellen. Die allgemeine Methode zum Definieren einer benutzerdefinierten Pipe lautet wie folgt.

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

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

Wo,

  • 'Pipename' - Dies ist der Name der Pfeife.

  • Pipeclass - Dies ist der Name der Klasse, die der benutzerdefinierten Pipe zugewiesen ist.

  • Transform - Dies ist die Funktion zum Arbeiten mit dem Rohr.

  • Parameters - Dies sind die Parameter, die an das Rohr übergeben werden.

  • Returntype - Dies ist der Rücklauftyp des Rohrs.

Erstellen wir eine benutzerdefinierte Pipe, die 2 Zahlen multipliziert. Wir werden diese Pipe dann in unserer Komponentenklasse verwenden.

Step 1 - Erstellen Sie zunächst eine Datei mit dem Namen multiplier.pipe.ts.

Step 2 - Fügen Sie den folgenden Code in die oben erstellte Datei ein.

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

Die folgenden Punkte müssen zum obigen Code beachtet werden.

  • Wir importieren zuerst die Module Pipe und PipeTransform.

  • Dann erstellen wir eine Pipe mit dem Namen 'Multiplikator'.

  • Erstellen einer Klasse namens MultiplierPipe, die das PipeTransform-Modul implementiert.

  • Die Transformationsfunktion nimmt dann den Wert und mehrere Parameter auf und gibt die Multiplikation beider Zahlen aus.

Step 3 - Geben Sie in die Datei app.component.ts den folgenden Code ein.

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

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

Note - In unserer Vorlage verwenden wir unsere neue benutzerdefinierte Pipe.

Step 4 - Stellen Sie sicher, dass der folgende Code in der Datei app.module.ts abgelegt ist.

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

Die folgenden Dinge müssen über den obigen Code beachtet werden.

  • Wir müssen sicherstellen, dass unser MultiplierPipe-Modul enthalten ist.

  • Wir müssen auch sicherstellen, dass es in den Deklarationsabschnitt aufgenommen wird.

Sobald Sie alle Codeänderungen gespeichert und den Browser aktualisiert haben, erhalten Sie die folgende Ausgabe.