Joskus Angularin sisäänrakennetut putket eivät riitä. Saatat tarvita ainutlaatuisen muunnoksen, joka on erityisesti sovellustasi varten. Tällöin voit luoda oman mukautetun putken.

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

Mukautetun putken luominen

Voit luoda mukautetun putken Angularissa seuraavalla CLI-komennolla. Kutsumme sitä nimellä formatTitle, koska sen tehtävänä on muotoilla tehtävän otsikko sen suoritusstatuksen perusteella:

Tämä komento luo kaksi tiedostoa:

• format-title.pipe.ts — putken 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 valinnaisia argumentteja ja 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

Meidän tulee lisätä ✅-emoji otsikkoon tehtävän valmistumisen mukaan (task.completed). Päivitä pipe käyttämään omaa muotoilulogiikkaamme:

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 mallissa

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

Tässä tapahtuu seuraavaa:

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

• 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 mallisi selkeinä ja luettavina sekä siirtää muotoilulogiikan uudelleenkäytettävään ja testattavaan koodiin.