|
|
Zveřejněno 26.06.2019 14:42:08
|
|
|
|
Než se pustíme do dekorátorů vlastností HostListener a HostBinding, pojďme se podívat na prvek hostitele.
Koncept hostitelského prvku platí jak pro instrukce, tak pro komponenty. Co se týče instrukcí, koncept je poměrně jednoduchý. Prvek, který aplikuje instrukci, je hostitelský prvek. Řekněme, že jsme deklarovali direktivu HighlightDirective (selector: '[exeHighlight]'):
V uvedeném HTML kódu je prvek p hostitelským prvkem. Pokud je směrnice aplikována na vlastní komponentu, například:
V tomto případě je exe-counter vlastní prvek hostitelským prvkem.
HostListener je dekorátor nemovitostí, který přidává prvky event listening do hostitelských prvků.
V Angularu můžeme použít dekorátor HostBinding k implementaci vlastnostního přiřazení prvků.
Tato směrnice ukazuje, jak použít dekorátor HostListener k naslouchání událostem kliknutí uživatelů
Kromě toho můžeme také naslouchat událostem generovaným objekty jinými než hostitelským prvkem, jako je okno, dokument nebo tělo
Cílem může být okno, dokument nebo tělo
@HostBinding() a @HostListener() jsou užitečné při úpravě instrukcí. @HostBinding() může přidávat třídy, styly, atributy atd. k hostitelskému prvku příkazu, zatímco @HostListener() může poslouchat události na hostitelském prvku.
Příklad: Implementujte barvu písma a okraje, která mění písmo a barvu rámečku v reálném čase během psaní
Pojďme si promluvit o hlavní části kódu výše:
(1): Pojmenujte naše velení appRainbow
(2): Definujte všechny možné barvy, které potřebujeme ukázat
(3): Definujte a ozdobte color a borderColor pomocí @HostBinding() pro styling
(4): Použijte @HostListener() k poslechu události keydown hostitelského prvku a náhodně přiřaďte barvy k barvě a okrajové barvě
Použijte tento příkaz na stránce:
Efekt je následující:
|
Předchozí:Princip ověřování digitálního podpisu SM2Další:JS určuje, zda js funkce a proměnné existují
|
