|
|
Zverejnené 26. 6. 2019 14:42:08
|
|
|
|
Skôr než sa pustíme do dekorátorov vlastností HostListener a HostBinding, pozrime sa na prvok hostiteľa.
Koncept hostiteľského prvku sa vzťahuje na inštrukcie aj komponenty. Čo sa týka inštrukcií, koncept je pomerne jednoduchý. Prvok, ktorý aplikuje inštrukciu, je hostiteľský prvok. Povedzme, že sme deklarovali HighlightDirective directive (výber: '[exeHighlight]'):
V uvedenom HTML kóde je prvok p hostiteľským prvkom. Ak sa smernica aplikuje na vlastnú komponentu, napríklad:
V tomto prípade je exe-counter vlastný prvok hostiteľským prvkom.
HostListener je dekorátor nehnuteľností, ktorý pridáva prvky počúvania udalostí do hostiteľských prvkov.
V Angulare môžeme použiť dekorátor HostBinding na implementáciu viazania vlastností prvkov.
Táto smernica ukazuje, ako použiť dekorátor HostListener na počúvanie kliknutí používateľa
Okrem toho môžeme tiež počúvať udalosti generované objektmi inými než hostiteľským prvkom, ako je okno, dokument alebo telo
Cieľom môže byť okno, dokument alebo telo
@HostBinding() a @HostListener() sú užitočné pri prispôsobovaní inštrukcií. @HostBinding() môže pridávať triedy, štýly, atribúty atď. k hostiteľskému prvku príkazu, zatiaľ čo @HostListener() môže počúvať udalosti na hostiteľskom prvku.
Príklad: Implementujte farbu písma a okraja, ktorá mení farbu písma a okraja v reálnom čase počas písania
Poďme sa porozprávať o hlavnej časti kódu vyššie:
(1): Pomenujte naše velenie aRainbow
(2): Definujte všetky možné farby, ktoré potrebujeme ukázať
(3): Definujte a dekorujte color a borderColor pomocou @HostBinding() na styling
(4): Použite @HostListener() na počúvanie udalosti keydown hostiteľského prvku a náhodne priraďte farby farbe a okrajovú farbu
Použite tento príkaz na stránke:
Efekt je nasledovný:
|
Predchádzajúci:Princíp overovania digitálneho podpisu SM2Budúci:JS určuje, či existujú JS funkcie a premenné
|
