Înainte să intrăm în decoratorii de proprietăți HostListener și HostBinding, să aruncăm o privire asupra elementului gazdă.
Conceptul de element gazdă se aplică atât instrucțiunilor, cât și componentelor. În ceea ce privește instrucțiunile, conceptul este destul de simplu. Elementul care aplică instrucțiunea este elementul gazdă. Să presupunem că am declarat o directivă HighlightDirective (selector: '[exeHighlight]'):
În codul HTML de mai sus, elementul p este elementul gazdă. Dacă directiva este aplicată unei componente personalizate, cum ar fi:
În acest caz, elementul personalizat ex-counter este elementul gazdă.
HostListener este un decorator de proprietăți care adaugă ascultarea evenimentelor în elementele gazdei.
În Angular, putem folosi decoratorul HostBinding pentru a implementa legarea proprietăților elementelor.
Această directivă demonstrează cum să folosești decoratorul HostListener pentru a asculta evenimentele de click ale utilizatorului
În plus, putem asculta și evenimentele generate de obiecte altele decât elementul gazdă, cum ar fi fereastra, document sau corp
Ținta poate fi fereastră, document sau corp
@HostBinding() și @HostListener() sunt utile la personalizarea instrucțiunilor. @HostBinding() poate adăuga clase, stiluri, atribute etc. elementului gazdă al comenzii, în timp ce @HostListener() poate asculta evenimentele de pe elementul gazdă.
Exemplu: Implementează un font și o culoare de margine care să schimbe fontul și culoarea marginii în timp real pe măsură ce tastezi
Să vorbim despre partea principală a codului de mai sus:
(1): Numește aplicația noastră de comandă Rainbow
(2): Definiți toate culorile posibile pe care trebuie să le arătăm
(3): Definește și decorează culoarea și bordura Culoarea cu @HostBinding() pentru stilizare
(4): Folosește @HostListener() pentru a asculta evenimentul keydown al elementului gazdă și atribui aleatoriu culori culorilor culorilor pentru color și borderColor
Folosește această comandă de pe pagină:
Efectul este următorul:
|
Postat pe 26.06.2019 14:42:08
|
|
|
|
