Utilice canalizaciones personalizadas para formatear sus datos como los necesite.
Las canalizaciones son una poderosa característica de Angular que le permite transformar y formatear datos en su aplicación. Proporcionan una manera conveniente de manipular datos antes de mostrárselos al usuario, lo que hace que su aplicación sea más dinámica y fácil de usar.
Angular ofrece una variedad de canalizaciones integradas como DatePipe, CurrencyPipe y UpperCasePipe. Junto con las canalizaciones integradas que ofrece Angular, puede crear canalizaciones personalizadas para transformar los datos de la forma que necesite.
Configure su proyecto angular
Antes de crear tuberías personalizadas, asegúrese de entender las tuberías en angular. Para poder configurar un proyecto Angular, asegúrese de tener la CLI de Angular instalada en su máquina. Puedes instalarlo con npm (Administrador de paquetes de nodos).
Instale Angular CLI ejecutando el siguiente comando:
npm install -g @angular/cli
A continuación, cree un nuevo proyecto Angular ejecutando este comando:
ng new my-app
Una vez que haya creado el proyecto, navegue hasta el directorio de su proyecto y abra su aplicación en su IDE.
Crear una tubería personalizada
Ahora que ha configurado su aplicación Angular, lo siguiente que debe hacer es crear una tubería personalizada. Para crear una tubería personalizada, debe generar una nueva usando la CLI de Angular.
Para hacer esto, ejecute el siguiente comando en el directorio de su aplicación en la terminal:
ng generate pipe customPipe
Este comando generará dos archivos llamados tubería-personalizada.pipe.ts y tubería-personalizada.tubería.spec.ts en el origen/aplicación directorio. El archivo custom-pipe.pipe.ts es un archivo mecanografiado que contiene el código para definir su tubería personalizada. Utilizará custom-pipe.pipe.spec.ts para ejecutar pruebas en la tubería personalizada.
En el tubería-personalizada.pipe.ts archivo, encontrará estas líneas de código:
import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
}
}
Este bloque de código importa el Tubo decorador y el Transformación de tubería interfaz desde el @angular/núcleo módulo. El decorador Pipe define los metadatos de la tubería y la clase pipe implementa la interfaz PipeTransform.
En el Tubería personalizada clase, implementas el Transformación de tubería interfaz, lo que requiere implementar la transformar método. El método de transformación es responsable de transformar el valor de entrada.
El transformar El método toma dos parámetros. valor y argumentos. El parámetro value representa el valor de transformación de la tubería y el parámetro args representa parámetros opcionales que quizás desee agregar.
Ahora has entendido el texto estándar de la tubería-personalizada.pipe.ts archivo, reemplace el bloque de código anterior con este código:
import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
transform(value: string): string[] {
return value.split('');
}
}
En este bloque de código, el transformar El método toma el valor parámetro del tipo cadena como argumento y devuelve una matriz de cadenas. El método de transformación divide la cadena de entrada en una matriz de caracteres individuales usando el dividir método y devuelve la matriz resultante.
Integración de la tubería personalizada en su aplicación
Ha creado con éxito su tubería personalizada y ahora puede usarla en sus plantillas de Angular. Antes de usar la tubería personalizada en su aplicación, impórtela y declárela en su aplicación.module.ts archivo. Para hacer esto, reemplace el código en app.module.ts con lo siguiente:
import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
declarations: [
AppComponent,
CustomPipePipe
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
exportclass AppModule { }
Ahora puedes usar la tubería en tus plantillas. Abre el aplicación.componente.html archivo y agregue el siguiente código:
<p>{{ 'apple' | CustomPipe }}p>
En este ejemplo, utiliza el Tubería personalizada tubo para transformar la cuerda 'manzana' en una matriz de cadenas.
Pruebe su tubería personalizada
Para ver su canalización personalizada en acción, ejecute el servidor de desarrollo Angular. Puede hacer esto ejecutando el siguiente comando de terminal:
ng serve
Abra su navegador y navegue hasta http://localhost: 4200. Deberías ver la cadena transformada mostrada en la página:
Lleve sus aplicaciones angulares al siguiente nivel
Las tuberías son una poderosa herramienta angular que le permite transformar y formatear datos en su aplicación. Puede crear tuberías personalizadas que se adapten a sus necesidades específicas y hacer que su aplicación Angular sea más dinámica.
Otra forma de llevar sus aplicaciones Angular al siguiente nivel es comprender el enrutamiento en Angular. El enrutamiento es un concepto clave que le permite controlar cómo los usuarios navegan por su aplicación. Al comprender el enrutamiento, puede crear aplicaciones de una sola página que sean más fáciles de usar y eficientes.
