La différence entre l'utilisation de @HostBinding() et @HostListener() dans AngularJS

Cette fois, je vais vous présenter les différences entre @HostBinding() et @HostListener() dans AngularJS, et les notes lors de l'utilisation de @HostBinding() et @HostListener() dans AngularJS Quels sont les enjeux ? Voici des cas pratiques.

@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, tandis que @HostListener() peut écouter l' événement sur l'élément hôte.

@HostBinding() et @HostListener() ne sont pas seulement utilisés dans les instructions personnalisées, mais ils sont souvent utilisés dans les instructions personnalisées

Cet article est basé sur Angular2+

Ensuite, nous apprenons l'utilisation de @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 notre directive appRainbow
② : Définissez toutes les couleurs possibles que nous devons afficher
③ : Définissez et utilisez @HostBinding() pour décorer la couleur et borderColor pour définir les styles
④ : Utilisez @HostListener() pour écouter à l'événement keydown de l'élément hôte et attribue des couleurs de manière aléatoire à color et borderColor

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

springmvc ne peut pas accepter de paramètres lorsqu'axios envoie une requête

Comment implémenter la fonction de requête réseau via axios

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!