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.