Mielőtt a HostListener és HostBinding tulajdonságtervezőkbe térnénk, nézzük meg a host elemet.
A hostelem fogalma mind utasításokra, mind komponensekre vonatkozik. Az utasítások esetében a koncepció meglehetősen egyszerű. Az utasítást alkalmazó elem a host elem. Tegyük fel, hogy kihirdettünk egy HighlightDirective utasítást (választó: '[exeHighlight]'):
A fenti HTML kódban a p elem a gazdaelem. Ha az utasítást egy egyedi komponensre alkalmazzák, például:
Ebben az esetben az exe-counter egyedi elem a host elem.
A HostListener egy olyan tulajdonságtervező, amely az eseményhallgatást is hozzáadja a házigazdai elemekhez.
Az Angularban a HostBinding dekorátort használhatjuk elemek tulajdonságainak kötésének megvalósítására.
Ez az irányelv bemutatja, hogyan lehet a HostListener dekorátort használni a felhasználói kattintási események meghallgatására
Ezen felül hallgathatunk eseményeket is, amelyeket más objektumok generálnak a host elemen kívül, például ablak, dokumentum vagy test
A célpont lehet ablak, dokumentum vagy test
Az @HostBinding() és a @HostListener() hasznosak az utasítások testreszabásához. Az @HostBinding() osztályokat, stílusokat, attribútumokat stb. adhat hozzá a parancs host eleméhez, míg a @HostListener() meghallgathatja a host elem eseményeit.
Példa: Valósíts meg egy betűtípus- és szegélyszínt, amely valós időben változtatja a betűtípust és a szegély színét gépelés közben
Beszéljünk a fenti kód fő részéről:
(1): Nevezd meg a parancsnunk appRainbow
(2): Határozzuk meg az összes lehetséges színt, amit meg kell mutatnunk
(3): Határozd meg és díszítse a színt és szegélytSzínezd @HostBinding() betűvel a stílushoz
(4): Használd a @HostListener() billentyűt, hogy meghallgasd a host elem kulcsle-eseményét, és véletlenszerűen rendeld el a színeket a színhez és a borderColorhoz
Használd ezt a parancsot az oldalon:
A hatás a következő:
|
Közzétéve 2019. 06. 26. 14:42:08
|
|
|
|
