Țevi

Motivație

Transformări de date de ieșire. Acestea asigură că datele sunt într-un format dorit până când se încarcă pe ecranul utilizatorului. În mod normal, datele se transformă în culise. Cu țevi, transformarea datelor poate avea loc în șablonul HTML. Țevile transformă direct datele șablonului.

Țevile arată frumos și sunt convenabile. Ele ajută la menținerea clasei componentei slabe de transformări de bază. Pentru a o spune tehnic, conductele încapsulează logica transformării datelor.

Transformarea ieșirii

După cum sa menționat în secțiunea anterioară, conductele transformă datele în linie. Sintaxa conductelor corelează scriptul shell. În multe scripturi, rezultatul unei părți a comenzii devine conductă ca ieșire în partea următoare ca intrare. Aceeași tendință caracterizează conductele unghiulare.

În Angular, există multe modalități de a interacționa cu datele din șablonul HTML. Țevile se pot aplica oriunde datele sunt analizate în șablonul HTML. Acestea pot apărea în cadrul logicii de microsintaxă și al interpolărilor variabilei HTML interioare. Țevile reprezintă toate transformările fără a adăuga în clasa componentelor.

Țevile sunt, de asemenea înlănțuit. Puteți integra țevi una după alta pentru a efectua transformări din ce în ce mai complexe. Ca transformatoare de date specializate, țevile sunt greu de trivial.

Cazuri de utilizare

Unghiular vine preambalat cu un set de țevi de bază. Lucrul cu câțiva dintre ei va dezvolta intuiția de a face față restului. Următoarea listă oferă două exemple.

ad-banner
  • AsyncPipe
  • DatePipe

Acești doi îndeplinesc sarcini simple. Simplitatea lor este benefică masiv.

AsyncPipe

Aceste secțiuni necesită o înțelegere de bază a promisiunilor sau observabilelor pentru a fi apreciate pe deplin. AsyncPipe funcționează pe oricare dintre cele două. AsyncPipe extrage date din Promisiuni / Observabile ca rezultat pentru orice va urma.

În cazul Obervables, AsyncPipe se abonează automat la sursa de date. Indiferent de unde provin datele, AsyncPipe se abonează la sursa observabilă. async este numele sintactic al AsyncPipe așa cum se arată mai jos.

<ul *ngFor=“let potato of (potatoSack$ | async); let i=index”>
  <li>Potatoe {{i + 1}}: {{potato}}</li>
</ul>

În exemplu, potatoSack$ este un Observabil în așteptarea încărcării cartofilor. Odată ce sosesc cartofii, fie sincron, fie asincron, AsyncPipe îi primește ca iterabil matrice. Elementul listă se umple apoi cu cartofi.

DatePipe

Formatarea șirurilor de date necesită un pic de hacking cu JavaScript Date obiect. DatePipe oferă un mod puternic de formatare a datelor, presupunând că intrarea dată este un format de oră valid.

// 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>

Formatul celor de mai sus timestamp este ISO 86011—Nu este cel mai ușor de citit. DatePipe (date) transformă formatul de dată ISO într-un format mai convențional mm/dd/yy, hh:mm AM|PM. Există multe alte opțiuni de formatare. Toate aceste opțiuni sunt în documentație oficială.

Crearea țevilor

În timp ce Angular are doar un număr stabilit de țevi, @Pipe decorator permite dezvoltatorilor să creeze propriile lor. Procesul începe cu ng generate pipe [name-of-pipe], înlocuind [name-of-pipe] cu un nume de fișier preferabil. Aceasta este o CLI unghiular comanda. Rezultă următoarele.

import { Pipe, PipeTransform } from ‘@angular/core’;

@Pipe({
  name: 'example'
})
export class ExamplePipe implements PipeTransform {
  transform(value: any, args?: any): any {
      return null;
  }
}

Acest șablon de țeavă simplifică crearea personalizată de țevi. @Pipe decoratorul îi spune lui Angular că clasa este o țeavă. Valoarea a name: ‘example’, în acest caz fiind example, este valoarea pe care Angular o recunoaște atunci când scanează șablonul HTML pentru țevi personalizate.

Pe logica clasei. PipeTransform implementarea oferă instrucțiunile pentru transform funcţie. Această funcție are o semnificație specială în contextul @Pipe decorator. Primește în mod implicit doi parametri.

value: any este ieșirea pe care o primește conducta. A se gandi la <div>{{ someValue | example }}</div>. Valoarea someValue este transmisă către transform funcție value: any parametru. Asta e lafel transform funcție definită în clasa ExamplePipe.

args?: any este orice argument pe care conducta îl primește opțional. A se gandi la <div>{{ someValue | example:[some-argument] }}</div>. [some-argument] poate fi înlocuit cu orice valoare. Această valoare este transmisă către transform funcție args?: any parametru. Adică transform funcție definită în clasa ExamplePipe.

Orice funcție revine (return null;) devine ieșirea operației de țeavă. Aruncați o privire la următorul exemplu pentru a vedea un exemplu complet de ExamplePipe. În funcție de variabila pe care o primește țeava, aceasta scrie cu majuscule sau cu minuscule intrarea ca ieșire nouă. Un argument nevalid sau inexistent va face ca conducta să returneze aceeași intrare ca și ieșirea.

// 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>

Înțelegerea exemplului de mai sus înseamnă că înțelegeți conductele unghiulare. Mai rămâne doar un subiect de discutat.

Țevi pure și impure

Tot ce ai văzut până acum a fost un pur conductă. pure: true este setat implicit în @Pipe metadatele decoratorului. Diferența dintre cele două constituie detectarea schimbării Angular.

Tuburile pure se actualizează automat ori de câte ori se modifică valoarea intrării sale derivate. Conducta se va executa din nou pentru a produce o nouă ieșire după o modificare detectabilă a valorii de intrare. Modificările detectabile sunt determinate de bucla de detectare a modificărilor Angular.

Conductele impure se actualizează automat ori de câte ori are loc un ciclu de detectare a modificărilor. Detectarea modificărilor Angular are loc destul de des. Semnalează dacă au avut loc modificări în datele membre ale clasei de componente. Dacă da, șablonul HTML se actualizează cu datele actualizate. Altfel, nu se va întâmpla nimic.

În cazul unei conducte impure, aceasta se va actualiza indiferent dacă există sau nu o modificare detectabilă. O conductă impură se actualizează ori de câte ori buclele de detectare a modificărilor. Țevile impure consumă de obicei o mulțime de resurse și sunt, în general, prost sfătuite. Acestea fiind spuse, funcționează mai mult ca o trapă de evacuare. Dacă aveți nevoie vreodată de o conductă sensibilă la detecție, comutați pure: false în @Pipe metadatele decoratorului.

Concluzie

Asta acoperă țevile. Țevile au o mulțime de potențial dincolo de scopul acestui articol. Țevile contribuie la transformări succinte ale datelor în șablonul HTML al componentelor dvs. Sunt bune practici în situațiile în care datele trebuie să sufere mici transformări.