Mitä ovat pipes Angular-sovelluksissa?

Question

Accepted Answer

**Pipes** muuntavat tietoa **näyttöä varten** suoraan malleissa käyttämällä operaattoria `|`. Ne antavat sinulle mahdollisuuden muotoilla arvoja (päiväykset, valuutat, teksti) ilman että muutat pohjalla olevia tietoja tai kirjoitat muunnoslogiikkaa komponenttiin. ## Sisäänrakennettujen pipes-toimintojen käyttäminen ```html

``` Vasemmalla oleva arvo lähetetään pipes-toiminnon läpi; argumentit seuraavat kaksoispisteellä (`date:'longDate'`). ## Pipes-toimintojen ketjutus ```html

``` ## Async pipe — poikkeuksellinen ominaisuus ```html

``` `async` on erityisen tärkeä: se tilaa Observablen (esim. HTTP-tuloksen), näyttää lähetetyn arvon ja **lopettaa tilauksen automaattisesti** kun komponentti tuhotaan — estäen muistin vuotamisen ilman manuaalista tilauksenhallintaa. ## Mukautetun pipes-toiminnon luominen ```ts import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "truncate" }) export class TruncatePipe implements PipeTransform { transform(value: string, limit = 20): string { return value.length > limit ? value.slice(0, limit) + "…" : value; } } // usage: {{ longText | truncate:50 }} ``` ## Puhtaat vs epäpuhtaat pipes-toiminnot ```text Pure (default): re-runs only when the input REFERENCE changes → efficient (cached) Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering) ``` Puhtaat pipes-toiminnot välimuistiin tallennetaan ja lasketaan uudelleen vain silloin kun niiden syöte muuttuu — mikä tekee niistä tehokkaat. ## Miksi tämä on tärkeää Pipes-toiminnot pitävät tietojen muotoilun deklaratiivisena ja mallissa missä sille kuuluu, erillään komponentin logiikasta — uudelleenkäytettävät, ketjutettavat, ja (kun ne ovat puhtaat) tehokkaat. Sisäänrakennetut pipes-toiminnot kattavat yleisen muotoilun, mukautetut pipes-toiminnot käsittelevät sovellukselle ominaisia muunnoksia, ja `async` pipe on idiomatinen, vuotovapaa tapa näyttää Observable-tietoja — kuvio, jota käytät jatkuvasti Angular-sovelluksissa.