Ennen kuin siirrymme HostListener- ja HostBinding-ominaisuuksien sisustajiin, katsotaanpa isäntäelementtiä.
Isäntäelementin käsite pätee sekä käskyihin että komponentteihin. Ohjeiden osalta käsite on melko yksinkertainen. Käskyä soveltava elementti on isäntäelementti. Oletetaan, että olemme julistaneet HighlightDirective -direktiivin (valitsin: '[exeHighlight]'):
Yllä olevassa HTML-koodissa p-alkio on isäntäelementti. Jos direktiivi sovelletaan mukautettuun komponenttiin, kuten:
Tässä tapauksessa exe-laskurin mukautettu alkio on isäntäelementti.
HostListener on kiinteistön sisustaja, joka lisää tapahtumakuuntelua isäntäelementteihin.
Angularissa voimme käyttää HostBinding-koristelijaa elementtien ominaisuuksien sitomiseen.
Tämä ohjeistus osoittaa, miten HostListener-koristelijaa käytetään käyttäjän klikkaustapahtumien kuuntelemiseen
Lisäksi voimme kuunnella tapahtumia, joita generoivat muut objektit kuin isäntäelementti, kuten ikkuna, dokumentti tai runko
Kohde voi olla ikkuna, dokumentti tai runko
@HostBinding() ja @HostListener() ovat hyödyllisiä ohjeiden muokattamisessa. @HostBinding() voi lisätä luokkia, tyylejä, attribuutteja jne. komennon isäntäelementtiin, kun taas @HostListener() voi kuunnella isäntäelementin tapahtumia.
Esimerkki: Toteuta fontti- ja reunusväri, joka muuttaa fontin ja reunan väriä reaaliajassa kirjoittaessasi
Puhutaanpa yllä olevan koodin pääosasta:
(1): Nimeä komentomme appRainbow
(2): Määrittele kaikki mahdolliset värit, jotka meidän täytyy näyttää
(3): Määrittele ja koristele väri ja reunusVäri @HostBinding():llä stailausta varten
(4): Käytä @HostListener() kuunnellaksesi isäntäelementin keydown-tapahtumaa ja satunnaisesti määrittele värit värille ja borderColorille
Käytä tätä komentoa sivulla:
Vaikutus on seuraava:
|
Julkaistu 26.6.2019 14.42.08
|
|
|
|
