Cet article présente principalement l'utilisation d'Angular @HostBinding() et @HostListener(). Maintenant, je le partage avec vous et le donne comme référence.
@HostBinding() et @HostListener() sont très utiles lors de la personnalisation des directives. @HostBinding() peut ajouter des classes, des styles, des attributs, etc. à l'élément hôte de l'instruction, et @HostListener() peut écouter les événements sur l'élément hôte.
@HostBinding() et @HostListener() ne sont pas seulement utilisés dans les instructions personnalisées, mais sont souvent utilisés dans les instructions personnalisées
Cet article est basé sur Angular2+
Apprenons à utiliser @HostBinding() et @HostListener() en implémentant une commande qui modifie la couleur de la police et de la bordure en temps réel lors de la saisie.
import { Directive, HostBinding, HostListener } from '@angular/core'; @Directive({ selector: '[appRainbow]'① }) export class RainbowDirective{ possibleColors = [ 'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff', 'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey' ];② @HostBinding('style.color') color: string; @HostBinding('style.borderColor') borderColor: string;③ @HostListener('keydown') onKeydown(){④ const colorPick = Math.floor(Math.random() * this.possibleColors.length); this.color = this.borderColor = this.possibleColors[colorPick]; } }
Parlons des principales parties du code ci-dessus :
① : Nommez nos instructions appRainbow
② : Définissez toutes les couleurs possibles que nous devons afficher
③ : Définissez et décorez la couleur et borderColor avec @HostBinding() pour définir les styles
④ : Utilisez @HostListener() pour écouter le clavier de l'hôte element Event, attribuez aléatoirement des couleurs à color et borderColor
OK, utilisez maintenant notre commande :
L'effet est le suivant :
REMARQUE : N'oubliez pas d'introduire les instructions dans votre module
Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que ce sera le cas. utile à tout le monde à l’avenir.
Articles associés :
Angular4 intègre le composant de téléchargement de ng2-file-upload
méthode de réglage dynamique de la hauteur de la table iview
Comment installer le chargeur style/css dans vue2.0
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!