Prima di entrare nei decoratori di proprietà di HostListener e HostBinding, diamo un'occhiata all'elemento host.
Il concetto di elemento host si applica sia alle istruzioni che ai componenti. Per le istruzioni, il concetto è piuttosto semplice. L'elemento che applica l'istruzione è l'elemento ospite. Supponiamo di aver dichiarato una direttiva Evidenziato (selettore: '[exeHighlight]'):
Nel codice HTML sopra, l'elemento p è l'elemento host. Se la direttiva viene applicata a un componente personalizzato, come ad esempio:
In questo caso, l'elemento personalizzato del contatore di exe è l'elemento host.
HostListener è un decoratore di proprietà che aggiunge elementi di ascolto di eventi agli elementi di conduttore.
In Angular, possiamo usare il decoratore HostBinding per implementare il binding delle proprietà degli elementi.
Questa direttiva dimostra come utilizzare il decorator HostListener per ascoltare gli eventi di click dell'utente
Inoltre, possiamo anche ascoltare eventi generati da oggetti diversi dall'elemento ospite, come finestra, documento o corpo
Il bersaglio può essere una finestra, un documento o un corpo
@HostBinding() e @HostListener() sono utili per personalizzare le istruzioni. @HostBinding() può aggiungere classi, stili, attributi, ecc. all'elemento host del comando, mentre @HostListener() può ascoltare gli eventi sull'elemento host.
Esempio: implementa un font e un colore di bordo che cambi il font e il colore del bordo in tempo reale mentre scrivi
Parliamo della parte principale del codice sopra:
(1): Dai un nome al nostro appRainbow di comando
(2): Definire tutti i colori possibili che dobbiamo mostrare
(3): Definire e decorare colore e bordoColore con @HostBinding() per lo stile
(4): Usa @HostListener() per ascoltare l'evento keydown dell'elemento host e assegnare casualmente colori a color e borderColor
Usa questo comando sulla pagina:
L'effetto è il seguente:
|
Pubblicato su 26/06/2019 14:42:08
|
|
|
|
