Joskus Angularin sisäänrakennetut pipet eivät riitä. Saatat tarvita ainutlaatuisen muunnoksen, joka on erityinen sovelluksellesi. Tässä tapauksessa voit luoda oman mukautetun pipen.

Oletetaan, että sinulla on tehtävälista, jossa jokainen tehtävä voi olla joko suoritettu tai suorittamatta. Jotta suoritetut tehtävät erottuvat visuaalisesti, haluat lisätä automaattisesti ✅-emojin niiden otsikoihin. Sen sijaan, että kovakoodaisit tämän logiikan jokaiseen malliin, voit rakentaa sitä varten oman pipen.

Oman pipen luominen

Luo mukautettu pipe Angularissa käyttämällä seuraavaa CLI-komentoa. Nimeämme sen formatTitle, koska sen tehtävänä on muotoilla tehtävän otsikko sen suoritusstatuksen perusteella:

Tämä luo kaksi tiedostoa:

• format-title.pipe.ts — pipen logiikka;

• format-title.pipe.spec.ts — yksikkötestitiedosto (voit poistaa sen, jos et tarvitse testejä tällä hetkellä).

Kun Angular luo putken, se näyttää suunnilleen tältä:

Tämä koodi tekee seuraavaa:

• FormatTitlePipe-luokka toteuttaa PipeTransform-rajapinnan, mikä varmistaa, että putkella on transform-metodi;

• transform-metodi vastaanottaa arvon (syötteen) ja valinnaiset argumentit sekä palauttaa muunnetun tuloksen. Tässä vaiheessa se palauttaa syötteen sellaisenaan;

• Putken nimi (formatTitle) määritellään @Pipe-koristelijassa — tätä nimeä käytetään mallissa.

Tällä hetkellä putki on olemassa, mutta ei vielä tee mitään. Lisätään seuraavaksi varsinainen logiikka.

Oman putken toteutus

Otsikkoon tulee lisätä ✅-emoji tehtävän valmistumistilan (task.completed) perusteella. Päivitä pipe käyttämään mukautettua muotoilulogiikkaa:

transform-metodi ottaa kaksi argumenttia:

• value — tehtävän otsikko;

• completed — totuusarvo, joka ilmaisee onko tehtävä valmis.

Jos tehtävä on valmis (true), otsikon loppuun lisätään ✅-emoji. Muussa tapauksessa otsikko palautetaan muuttumattomana.

Putken käyttäminen mallipohjassa

Käyttääksesi putkea Angular-mallipohjassa, liitä se putkisymbolilla |:

Tässä tapahtuu seuraavaa:

• task.title on arvo, joka välitetään putkelle;

• formatTitle:task.completed käyttää putkea ja välittää completed-lipun;

• Otsikko sisältää joko ✅-emojin tai ei, riippuen tehtävän tilasta.

Tämänkaltaisten putkien käyttö auttaa pitämään mallipohjat selkeinä ja luettavina sekä siirtää muotoilulogiikan uudelleenkäytettävään ja testattavaan koodiin.