Avant d’entrer dans les décorateurs de propriétés HostListener et HostBinding, jetons un coup d’œil à l’élément hôte.
Le concept d’élément hôte s’applique à la fois aux instructions et aux composants. Pour les instructions, le concept est assez simple. L’élément qui applique l’instruction est l’élément hôte. Disons que nous avons déclaré une directive Highlight Directive (sélecteur : « [exeHighlight] ») :
Dans le code HTML ci-dessus, l’élément p est l’élément hôte. Si la directive est appliquée à un composant personnalisé, tel que :
Dans ce cas, l’élément personnalisé compteur d’exe est l’élément hôte.
HostListener est un décorateur d’immeubles qui ajoute l’écoute d’événements aux éléments de l’hôte.
Dans Angular, nous pouvons utiliser le décorateur HostBinding pour implémenter la liaison de propriétés des éléments.
Cette directive montre comment utiliser le décorateur HostListener pour écouter les événements de clics des utilisateurs
De plus, nous pouvons aussi écouter les événements générés par des objets autres que l’élément hôte, tels que la fenêtre, le document ou le corps
La cible peut être une fenêtre, un document ou un corps
@HostBinding() et @HostListener() sont utiles pour personnaliser les instructions. @HostBinding() peut ajouter des classes, styles, attributs, etc. à l’élément hôte de la commande, tandis que @HostListener() peut écouter les événements sur l’élément hôte.
Exemple : implémentez une couleur de police et de bordure qui modifie la couleur de la police et de la bordure en temps réel pendant que vous tapez
Parlons de la partie principale du code ci-dessus :
(1) : Nommez notre application de commande Rainbow
(2) : Définir toutes les couleurs possibles que nous devons montrer
(3) : Définir et décorer la couleur et la bordure Colorer avec @HostBinding() pour le style
(4) : Utiliser @HostListener() pour écouter l’événement de keydown de l’élément hôte et attribuer aléatoirement des couleurs à color et borderColor
Utilisez cette commande sur la page :
L’effet est le suivant :
|
Publié sur 26/06/2019 14:42:08
|
|
|
|
