Prieš pradėdami nagrinėti "HostListener" ir "HostBinding" ypatybių dekoratorius, pažvelkime į pagrindinio kompiuterio elementą.
Pagrindinio elemento sąvoka taikoma tiek instrukcijoms, tiek komponentams. Instrukcijų koncepcija yra gana paprasta. Instrukciją taikantis elementas yra pagrindinis elementas. Tarkime, kad paskelbėme "HighlightDirective" direktyvą (selektorius: "[exeHighlight]"):
Aukščiau pateiktame HTML kode p elementas yra pagrindinis elementas. Jei direktyva taikoma pasirinktiniam komponentui, pvz.:
Šiuo atveju pasirinktinis exe-counter elementas yra pagrindinis elementas.
"HostListener" yra nekilnojamojo turto dekoratorius, pridedantis renginio klausymosi elementus.
"Angular" galime naudoti "HostBinding" dekoratorių, kad įgyvendintume elementų ypatybių susiejimą.
Ši direktyva parodo, kaip naudoti HostListener dekoratorių vartotojų paspaudimų įvykiams klausytis
Be to, taip pat galime klausytis įvykių, kuriuos sukuria kiti objektai nei pagrindinis elementas, pvz., langas, dokumentas ar kūnas
Paskirtis gali būti langas, dokumentas arba turinys
@HostBinding() ir @HostListener() yra naudingi tinkinant instrukcijas. @HostBinding() gali pridėti klases, stilius, atributus ir kt. prie komandos pagrindinio elemento, o @HostListener() gali klausytis įvykių pagrindiniame elemente.
Pavyzdys: įveskite šriftą ir kraštinės spalvą, kuri keičia šrifto ir kraštinės spalvą realiuoju laiku
Pakalbėkime apie pagrindinę aukščiau pateikto kodo dalį:
(1): Pavadinkite mūsų komandą appRainbow
(2): Apibrėžkite visas galimas spalvas, kurias turime parodyti
(3): Apibrėžkite ir papuoškite spalvą ir kraštinęSpalva su @HostBinding() stiliui
(4): Naudokite @HostListener(), kad klausytumėtės pagrindinio elemento klavišų įvykio ir atsitiktinai priskirtumėte spalvas spalvai ir kraštineiSpalva
Naudokite šią komandą puslapyje:
Poveikis yra toks:
|
Paskelbta 2019-06-26 14:42:08
|
|
|
|
