Angular 2 - Tubos personalizados
Angular 2 también tiene la posibilidad de crear tuberías personalizadas. La forma general de definir una tubería personalizada es la siguiente.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'Pipename'})
export class Pipeclass implements PipeTransform {
transform(parameters): returntype { }
}
Dónde,
'Pipename' - Este es el nombre de la tubería.
Pipeclass - Este es el nombre de la clase asignada a la tubería personalizada.
Transform - Esta es la función para trabajar con la tubería.
Parameters - Estos son los parámetros que se pasan a la tubería.
Returntype - Este es el tipo de retorno de la tubería.
Creemos una tubería personalizada que multiplique 2 números. Luego usaremos esa tubería en nuestra clase de componente.
Step 1 - Primero, cree un archivo llamado multiplicador.pipe.ts.
Step 2 - Coloque el siguiente código en el archivo creado anteriormente.
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
}
}
Se deben tener en cuenta los siguientes puntos sobre el código anterior.
Primero estamos importando los módulos Pipe y PipeTransform.
Luego, estamos creando una tubería con el nombre 'Multiplicador'.
Creando una clase llamada MultiplierPipe que implementa el módulo PipeTransform.
La función de transformación tomará el valor y el parámetro múltiple y generará la multiplicación de ambos números.
Step 3 - En el archivo app.component.ts, coloque el siguiente código.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>'
})
export class AppComponent { }
Note - En nuestra plantilla, usamos nuestra nueva tubería personalizada.
Step 4 - Asegúrese de que el siguiente código esté colocado en el archivo 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 {}
Se deben tener en cuenta las siguientes cosas sobre el código anterior.
Necesitamos asegurarnos de incluir nuestro módulo MultiplierPipe.
También debemos asegurarnos de que esté incluido en la sección de declaraciones.
Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.