Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-01 11:47:19
original
3202 Les gens l'ont consulté

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];
 }
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!