Angular Academy · Oppitunti

Mukautettujen pipejen luominen

Rakentakaa uudelleenkäytettäviä muunnospipejä.

Oppitunti 3/413 vaihetta

Mukautettujen pipejen luominen on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Miksi mukautettuja putkia käytetään?

Kun valmiit putket eivät riitä, voit luoda mukautetun putken, joka kapseloi malleissa uudelleenkäytettävän muunnoslogiikan.

@Pipe-dekoraattori

Putki on luokka, joka on koristeltu @Pipe-dekoraattorilla. name-ominaisuutta käytetään malleissa.

import { Pipe } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}

PipeTransformin toteuttaminen

Putkiluokka toteuttaa PipeTransform-rajapinnan, joka edellyttää yhtä transform-metodia.

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

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!";
  }
}

transform-metodi

transform-metodin ensimmäinen parametri on putkelle välitettävä arvo. Palauttamastasi arvosta tulee renderöity tuloste.

transform(value: string): string {
  return value.trim();
}

Oman putken käyttäminen

Tuo putki standalone-komponenttiin ja käytä sen nimeä mallissa aivan kuten valmista putkea.

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [ExclaimPipe],
  template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!

Argumenttien vastaanottaminen

value-parametrin jälkeisistä ylimääräisistä parametreista tulee putken argumentteja. Kutsuja välittää ne kaksoispisteillä.

@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}
// {{ "ab" | repeat:3 }} -> ababab

Argumenttien oletusarvot

Anna argumenteille oletusarvot, jotta kutsujat voivat jättää ne pois. Näin putkesi pysyy joustavana.

transform(value: string, times: number = 2): string {
  return value.repeat(times);
}
// {{ "ab" | repeat }} -> abab

Null- ja undefined-arvojen käsittely

Huolehdi aina puuttuvasta syötteestä. Palauta järkevä oletusarvo, kun arvo on null tai undefined.

transform(value: string | null): string {
  if (value == null) return "";
  return value.toUpperCase();
}

Esimerkki Truncate-putkesta

Tässä on käytännöllinen putki, joka lyhentää pitkää tekstiä ja lisää sen loppuun ellipsin.

@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return "";
    return value.length > limit
      ? value.slice(0, limit) + "..."
      : value;
  }
}

Paluuarvon tyypittäminen

Merkitse paluuarvon tyyppi, jotta TypeScript ja mallisi säilyvät tyyppiturvallisina. Putki voi palauttaa minkä tahansa tyypin, ei vain merkkijonoja.

@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

Rekisteröinti moduuliin (NgModule)

Jos käytät NgModule-moduuleja standalone-komponenttien sijaan, ilmoita putki declarations-taulukossa ja vie se tarvittaessa.

@NgModule({
  declarations: [TruncatePipe],
  exports: [TruncatePipe]
})
export class SharedModule {}

Pikatarkistus

Testaa, miten hyvin ymmärrät mukautettuja putkia.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Rakensit mukautetun putken @Pipe-dekoraattorilla ja PipeTransform-rajapinnalla, vastaanotit oletusarvoisia argumentteja, käsittelit null-arvon ja rekisteröit putken standalone-komponentteihin tai NgModule-moduuleihin.

Seuraavaksi opit puhtaista ja epäpuhtaista putkista.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Mukautettujen pipejen luominen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Mukautettujen pipejen luominen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Mukautettujen pipejen luominen”?

Rakentakaa uudelleenkäytettäviä muunnospipejä. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Mukautettujen pipejen luominen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy