8.8 KiB
| title | localeTitle |
|---|---|
| Pipes | Tubería |
Tubería
Motivación
Transformaciones de datos de salida. Aseguran que los datos estén en un formato deseable en el momento en que se cargan en la pantalla del usuario. Normalmente los datos se transforman tras bambalinas. Con tuberías, los datos de transformación pueden tener lugar en la plantilla HTML. Las tuberías transforman los datos de la plantilla directamente.
Las tuberías se ven bien y son convenientes. Ayudan a mantener la clase del componente de las transformaciones básicas. Para ponerlo técnicamente, las tuberías encapsulan la lógica de transformación de datos.
Transformación de salida
Como se mencionó en la sección anterior, las tuberías transforman los datos en línea. La sintaxis de las tuberías correlaciona shell scripting. En muchos scripts, la salida de una parte del comando se canaliza como salida en la siguiente parte como entrada. Esa misma tendencia caracteriza a los tubos angulares.
En Angular, existen muchas formas de interactuar con los datos en la plantilla HTML. Las tuberías pueden aplicarse en cualquier lugar donde los datos se analicen en la plantilla HTML. Pueden ocurrir dentro de la lógica microsyntax y las interpolaciones de variables internasHTML. Las tuberías tienen en cuenta todas las transformaciones sin agregar a la clase de componente.
Las tuberías también son chainable . Puede integrar tuberías una tras otra para realizar transformaciones cada vez más complejas. Como transformadores de datos especializados, las tuberías no son triviales.
Casos de uso
Angular viene preempacado con un conjunto básico de tuberías. Trabajar con un par de ellos desarrollará la intuición para manejar el resto. La siguiente lista proporciona dos ejemplos.
-
AsyncPipe
-
DatePipe
Estos dos realizan tareas simples. Su simplicidad es enormemente beneficiosa.
AsyncPipe
Esta sección requiere un entendimiento básico de Promesas u Observables para apreciarlo completamente. El AsyncPipe opera en cualquiera de los dos. AsyncPipe extrae datos de Promises / Observables como salida para lo que venga a continuación.
En el caso de Obervables, AsyncPipe se suscribe automáticamente al origen de datos. Sin importar de dónde provengan los datos, AsyncPipe se suscribe a la fuente observable. async es el nombre sintáctico de AsyncPipe como se muestra a continuación.
<ul *ngFor=“let potato of (potatoSack$ | async); let i=index”>
<li>Potatoe {{i + 1}}: {{potato}}</li>
</ul>
En el ejemplo, potatoSack$ es un Observable pendiente de una carga de papas. Una vez que llegan las papas, ya sea de forma síncrona o asíncrona, el AsyncPipe las recibe como una matriz iterable . El elemento de la lista se llena de patatas.
DatePipe
El formato de las cadenas de fecha requiere un poco de pirateo con el objeto Date JavaScript. El DatePipe proporciona una forma eficaz de formatear fechas asumiendo que la entrada dada es un formato de hora válido.
// example.component.ts
@Component({
templateUrl: './example.component.html'
})
export class ExampleComponent {
timestamp:string = '2018-05-24T19:38:11.103Z';
}
<!-- example.component.html -->
<div>Current Time: {{timestamp | date:'short'}}</div>
El formato de la timestamp anterior es ISO 8601 1, no es el más fácil de leer. El DatePipe ( date ) transforma el formato de fecha ISO en un formato más convencional mm/dd/yy, hh:mm AM|PM . Hay muchas otras opciones de formato. Todas estas opciones están en la documentación oficial .
Creando Tubos
Si bien Angular solo tiene un número determinado de canales, el decorador @Pipe permite a los desarrolladores crear los suyos. El proceso comienza con ng generate pipe [name-of-pipe] , reemplazando [name-of-pipe] con un nombre de archivo preferible. Este es un comando de CLI angular . Se obtiene lo siguiente.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'example'
})
export class ExamplePipe implements PipeTransform {
transform(value: any, args?: any): any {
return null;
}
}
Esta plantilla de tubería simplifica la creación de tubería personalizada. El decorador @Pipe le dice a Angular que la clase es un pipe. El valor de name: 'example' , en este caso de example , es el valor que Angular reconoce al escanear HTML de plantilla en busca de canalizaciones personalizadas.
A la lógica de clase. La implementación de PipeTransform proporciona las instrucciones para la función de transform . Esta función tiene un significado especial dentro del contexto del decorador @Pipe . Recibe dos parámetros por defecto.
value: any es la salida que recibe el tubo. Piensa en <div>{{ someValue | example }}</div> . El valor de someValue se pasa al value: any la función de transform value: any parámetro. Esta es la misma función de transform definida en la clase ExamplePipe.
args?: any es cualquier argumento que la tubería recibe opcionalmente. Piensa en <div>{{ someValue | example:[some-argument] }}</div> . [some-argument] puede ser reemplazado por cualquier valor. Este valor se pasa a los args?: any la función de transform args?: any parámetro. Es decir, la función de transform definida en la clase ExamplePipe.
Cualquiera que sea la función que devuelve ( return null; ) se convierte en la salida de la operación de tubería. Eche un vistazo al siguiente ejemplo para ver un ejemplo completo de ExamplePipe. Dependiendo de la variable que reciba la tubería, puede hacer mayúsculas o minúsculas en la entrada como nueva salida. Un argumento no válido o inexistente hará que la canalización devuelva la misma entrada que la salida.
// example.pipe.ts
@Pipe({
name: 'example'
})
export class ExamplePipe implements PipeTransform {
transform(value:string, args?:string): any {
switch(args || null) {
case 'uppercase':
return value.toUpperCase();
case 'lowercase':
return value.toLowerCase();
default:
return value;
}
}
}
// app.component.ts
@Component({
templateUrl: 'app.component.html'
})
export class AppComponent {
someValue:string = "HeLlO WoRlD!";
}
<!-- app.component.html -->
<!-- Outputs “HeLlO WoRlD!” -->
<h6>{{ someValue | example }}</h6>
<!-- Outputs “HELLO WORLD!” -->
<h6>{{ someValue | example:'uppercase' }}</h6>
<!-- Outputs “hello world!” -->
<h6>{{ someValue | example:'lowercase' }}</h6>
Comprender el ejemplo anterior significa que usted entiende las tuberías angulares. Solo queda un tema más por discutir.
Tubos puros e impuros
Todo lo que has visto hasta ahora ha sido una pipa pura . pure: true se establece de forma predeterminada en los metadatos del decorador @Pipe . La diferencia entre los dos constituye la detección del cambio de Angular.
Los tubos puros se actualizan automáticamente cada vez que cambia el valor de su entrada derivada. La tubería se volverá a ejecutar para producir una nueva salida ante un cambio detectable en el valor de entrada. Los cambios detectables están determinados por el bucle de detección de cambios de Angular.
Las tuberías impuras se actualizan automáticamente cada vez que se produce un ciclo de detección de cambios. La detección del cambio angular ocurre muy a menudo. Indica si se han producido cambios en los datos de los miembros de la clase de componente. Si es así, la plantilla HTML se actualiza con los datos actualizados. De lo contrario, no pasará nada.
En el caso de una tubería impura, se actualizará independientemente de si hay un cambio detectable o no. Un tubo impuro se actualiza cada vez que se cambian los bucles de detección. Las tuberías impuras usualmente consumen muchos recursos y generalmente son mal aconsejadas. Dicho esto, operan más como una escotilla de escape. Si alguna vez necesita una tubería sensible a la detección, alterne pure: false en los metadatos del decorador @Pipe .
Conclusión
Que cubre las tuberías. Las tuberías tienen mucho potencial más allá del alcance de este artículo. Las tuberías contribuyen con transformaciones de datos sucintas a la plantilla HTML de sus componentes. Son una buena práctica en situaciones donde los datos deben sufrir pequeñas transformaciones.