Angular 2 - Tubi personalizzati
Angular 2 ha anche la possibilità di creare tubi personalizzati. Il modo generale per definire una pipe personalizzata è il seguente.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'Pipename'})
export class Pipeclass implements PipeTransform {
transform(parameters): returntype { }
}
Dove,
'Pipename' - Questo è il nome della pipa.
Pipeclass - Questo è il nome della classe assegnata alla pipe personalizzata.
Transform - Questa è la funzione per lavorare con il tubo.
Parameters - Questi sono i parametri che vengono passati alla pipe.
Returntype - Questo è il tipo di ritorno della pipe.
Creiamo una pipe personalizzata che moltiplica 2 numeri. Useremo quindi quel tubo nella nostra classe di componenti.
Step 1 - Innanzitutto, crea un file chiamato multiplier.pipe.ts.
Step 2 - Inserisci il seguente codice nel file creato sopra.
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
}
}
I seguenti punti devono essere annotati sul codice di cui sopra.
Per prima cosa importiamo i moduli Pipe e PipeTransform.
Quindi, stiamo creando un tubo con il nome "Moltiplicatore".
Creazione di una classe denominata MultiplierPipe che implementa il modulo PipeTransform.
La funzione di trasformazione prenderà quindi il valore e il parametro multiplo e produrrà la moltiplicazione di entrambi i numeri.
Step 3 - Nel file app.component.ts, inserisci il seguente codice.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>'
})
export class AppComponent { }
Note - Nel nostro modello, utilizziamo la nostra nuova pipe personalizzata.
Step 4 - Assicurati che il codice seguente sia inserito nel file 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 {}
Le seguenti cose devono essere annotate sul codice sopra.
Dobbiamo assicurarci di includere il nostro modulo MultiplierPipe.
Dobbiamo anche assicurarci che sia incluso nella sezione delle dichiarazioni.
Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.