Pirms mēs nonākam pie HostListener un HostBinding rekvizītu dekoratoriem, apskatīsim resursdatora elementu.
Resurselementa jēdziens attiecas gan uz instrukcijām, gan komponentiem. Instrukcijām jēdziens ir diezgan vienkāršs. Elements, kas lieto instrukciju, ir resursdatora elements. Pieņemsim, ka mēs esam pasludinājuši HighlightDirective direktīvu (selektors: '[exeHighlight]'):
Iepriekš minētajā HTML kodā p elements ir resursdatora elements. Ja direktīva tiek lietota pielāgotam komponentam, piemēram:
Šajā gadījumā exe-counter pielāgotais elements ir resursdatora elements.
HostListener ir īpašuma dekorators, kas pievieno notikumu klausīšanos saimnieka elementiem.
Angular mēs varam izmantot HostBinding dekoratoru, lai īstenotu elementu īpašuma saistīšanu.
Šī direktīva parāda, kā izmantot HostListener dekoratoru, lai klausītos lietotāju klikšķu notikumus
Turklāt mēs varam klausīties arī notikumus, ko ģenerē objekti, kas nav resurselements, piemēram, logs vai dokuments vai ķermenis
Mērķis var būt logs, dokuments vai pamatteksts
@HostBinding() un @HostListener() ir noderīgi, pielāgojot instrukcijas. @HostBinding() var pievienot klases, stilus, atribūtus utt. komandas resurselementam, bet @HostListener() var klausīties notikumus resurselementā.
Piemērs: fonta un apmales krāsas ieviešana, kas rakstīšanas laikā reāllaikā maina fontu un apmales krāsu
Runāsim par iepriekš minētā koda galveno daļu:
(1): Nosauciet mūsu komandu appRainbow
(2): Definējiet visas iespējamās krāsas, kas mums jāparāda
(3): Definējiet un izrotājiet krāsu un apmaliKrāsa ar @HostBinding() stilam
(4): Izmantojiet @HostListener(), lai klausītos resurselementa taustiņa notikumu un nejauši piešķirtu krāsas krāsai un borderColor
Izmantojiet šo komandu lapā:
Efekts ir šāds:
|
Publicēts 26.06.2019 14:42:08
|
|
|
|
