Enne kui läheme HostListeneri ja HostBindingi omaduste kujundajate juurde, vaatame hosti elementi.
Hostelemendi mõiste kehtib nii käskude kui ka komponentide kohta. Juhiste puhul on kontseptsioon üsna lihtne. Element, mis rakendab käsu, on hostelement. Oletame, et oleme välja kuulutanud HighlightDirective direktiivi (valija: '[exeHighlight]'):
Ülaltoodud HTML-koodis on p element hostielement. Kui direktiiv rakendatakse kohandatud komponendile, näiteks:
Sellisel juhul on exe-loenduri kohandatud element hostelement.
HostListener on omaduste kujundaja, mis lisab ürituste kuulamise saatejuhi elementidele.
Angularis saame kasutada HostBinding dekoratorit, et rakendada elementide omaduste sidumist.
See direktiiv näitab, kuidas kasutada HostListener dekoraatorit, et kuulata kasutaja klikkide sündmusi
Lisaks saame kuulata ka sündmusi, mis on genereeritud objektide poolt väljaspool host-elementi, näiteks akna, dokument või keha
Sihtmärgiks võib olla aken, dokument või keha
@HostBinding() ja @HostListener() on kasulikud juhiste kohandamisel. @HostBinding() saab lisada klasse, stiile, atribuute jms käsu hostelemendile, samas kui @HostListener() saab kuulata sündmusi hostelemendil.
Näide: Rakenda fondi ja äärise värv, mis muudab fondi ja ääre värvi reaalajas, kui kirjutad
Räägime eelpool toodud koodi põhiosast:
(1): Nimeta meie käsk appRainbow
(2): Määratleda kõik võimalikud värvid, mida peame näitama
(3): Määratle ja kaunista värv ning äärisVärvi @HostBinding() stiiliks
(4): Kasuta @HostListener(), et kuulata hostelemendi klahvi sündmust ja määrata juhuslikult värvid värvile ja borderColorile
Kasuta seda käsku lehel:
Tulemus on järgmine:
|
Postitatud 26.06.2019 14:42:08
|
|
|
|
