Hay toneladas de tubos incorporados apoyados en Angular, que se utilizan para transformar los datos en un formato específico, y una cosa que hay que tener en cuenta es que estos tubos son concretos a la funcionalidad única y sus limitaciones.
Pero si queremos una transformación de datos basada en nuestro requerimiento personalizado, entonces necesitamos crear nuestra propia tubería para cumplir con nuestro requerimiento.
La tubería personalizada no es más que una función que toma el valor y otros argumentos para procesar los datos y devolver el valor transformado.
En primer lugar, tenemos que crear la tubería. Podemos crearla usando el comando CLI, así.
1Ng generar nombre_de_tubo
powerhell
Sólo tenemos que dar el nombre de la tubería, y estamos listos para ir. Ahora vamos a crear una para que juguemos con ella.
1Ng generar tubería micustompipe
powerhell
Después de ejecutar el comando anterior en la línea de comandos, se creará un nuevo archivo llamado mycustompipe.pipe.ts , y el contenido debería tener este aspecto.
12345678910111213importación{Tubo,TuboTransformación}de"@angular/núcleo";@Tubo({nombre: "mi tubo personalizado"})clase de exportaciónMi tubo personalizadoImplementosTuboTransformación{transformación(valor:cualquiera, args?:cualquiera):cualquiera{retorno;}}tipografía
Aquí tenemos una clase para nuestro tubo personalizado llamado MycustompipePipe, que implementa la interfaz llamada PipeTransform que se utiliza para transformar los datos con el uso del tubo en Angular.
Y hay un método llamado transform(), que es la verdadera magia detrás de la tubería personalizada, que acepta el valor real que necesita ser transformado junto con otros argumentos.
Usemos nuestra pipa personalizada y veamos los argumentos que estamos recibiendo.
123456789101112131415import{Pipe,PipeTransform}de"@angular/núcleo";@Pipe({ nombre: "mycustompipe"})exportclassMycustompipePipeimplementsPipeTransform{transform(valor:any, args?:any):any{console.log("Valor Básico :", valor);console.log("Argumentos adicionales:", args);valor de retorno;}}tipografía
En este ejemplo, sólo hemos utilizado dos declaraciones de consola diferentes para imprimir el valor y los argumentos que obtenemos de la plantilla. Abre el archivo de la plantilla app.component.html y pega estas líneas.
12<p> {{ $0027This is testing string$0027 | mycustompipe:$0027true$0027 }}</promover
html
Si abre la consola del navegador, entonces verá el valor junto con los argumentos proporcionados con el tubo.
Ejemplo
Hemos creado nuestra pipa personalizada y tenemos los valores junto con los argumentos. Ahora veamos una instancia en la que añadiremos { } o {{ }} con el valor real de la cadena basado en el argumento.
Modifiquemos la tubería personalizada mycustompipe.pipe.ts , que tiene este aspecto.
1234567891011121314151617181920212223importación{Tubo,TuboTransformación}de"@angular/núcleo";@Tubo({nombre: "mi tubo personalizado"})clase de exportaciónMi tubo personalizadoImplementosTuboTransformación{transformación{valor:cualquiera, args?:cualquiera):cualquiera{consola. log("Basic Value :", valor);console.log("Additional arguments:", args);if(value ===""){retorno"";}if(args ===$0027true$0027){retorno$0027{ $0027+ valor +$0027 }$0027}if(args ===$0027false$0027){retorno$0027{{{$0027+ valor +$0027}}$0027}valor de retorno;}}tipografía
Aquí en este ejemplo, tenemos tres diferentes condiciones.
- La primera condición comprueba si el valor es nulo o no
- La segunda condición se utiliza para verificar que el argumento que obtenemos es verdadero, entonces añadirá el símbolo { } antes y después de la cadena
- La tercera condición comprueba el argumento falso, y si coincide entonces añadiremos {{ y }} antes y después del valor
Y por último, si no se ejecuta ninguna de las condiciones, entonces devolveremos el valor estándar que estamos obteniendo de la plantilla.
Ya hemos terminado con nuestro ejemplo. Vamos a ejecutar este código de demostración, y obtendrá una salida que se parece a esto.
Aquí tenemos dos declaraciones diferentes, una con la verdad como argumento y otra con un argumento falso. Así que basado en la condición, el valor se transformará en un formato diferente y obtendremos el nuevo valor remodelado de la propia tubería.
Así es como podemos crear nuestra pipa personalizada con sólo proporcionar el valor junto con los diversos argumentos para que podamos transformar nuestro valor de una mejor manera.