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.