Preden se lotimo dekoratorjev lastnosti HostListener in HostBinding, si poglejmo element gostitelja.
Koncept gostiteljskega elementa velja tako za ukaze kot za komponente. Za navodila je koncept precej preprost. Element, ki uporablja ukaz, je gostiteljski element. Recimo, da smo razglasili direktivo HighlightDirective (izbirnik: '[exeHighlight]'):
V zgornji HTML kodi je p element gostiteljski element. Če je direktiva uporabljena za prilagojeno komponento, kot je:
V tem primeru je element exe-števec po meri gostiteljski element.
HostListener je dekorator nepremičnin, ki dodaja elemente poslušanja dogodkov gostiteljem.
V Angularju lahko uporabimo dekorator HostBinding za implementacijo vezave lastnosti elementov.
Ta direktiva prikazuje, kako uporabiti dekorator HostListener za poslušanje uporabniških klikov
Poleg tega lahko poslušamo tudi dogodke, ki jih generirajo objekti, ki niso gostiteljski element, kot so okno, dokument ali telo
Cilj je lahko okno, dokument ali telo
@HostBinding() in @HostListener() sta uporabna pri prilagajanju navodil. @HostBinding() lahko doda razrede, stile, atribute itd. gostiteljskemu elementu ukaza, medtem ko @HostListener() lahko posluša dogodke na gostiteljskem elementu.
Primer: Implementirajte barvo pisave in roba, ki spreminjata barvo pisave in roba v realnem času med tipkanjem
Pogovorimo se o glavnem delu zgornje kode:
(1): Poimenujte naše poveljstvo aRainbow
(2): Določimo vse možne barve, ki jih moramo pokazati
(3): Definirajte in okrasite barvo in BorderColor z @HostBinding() za oblikovanje
(4): Uporabite @HostListener() za poslušanje dogodka keydown gostiteljskega elementa in naključno dodelite barve barvi in BorderColor
Uporabite ta ukaz na strani:
Učinek je naslednji:
|
Objavljeno na 26. 06. 2019 14:42:08
|
|
|
|
