Utilisation de @HostBinding() et @HostListener() dans Angular (tutoriel détaillé)

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 :

fe61655dd2b35eca51f3f5f49f70adc6

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!