web-dev-qa-db-fra.com

@HostBinding et @HostListener: que font-ils et à quoi servent-ils?

Dans mes méandres dans le monde entier, et plus particulièrement dans docs de style angular.io , je trouve de nombreuses références à @HostBinding et @HostListener. Il semble qu’ils soient assez fondamentaux, mais malheureusement, leur documentation est pour le moment un peu sommaire.

Quelqu'un peut-il s'il vous plaît expliquer ce qu'ils sont, comment ils travaillent et donner un exemple de leur utilisation?

angularangular-services
159
serlingpa

Un petit conseil qui m'aide à me rappeler ce qu'ils font -

HostBinding('value') myValue; est exactement identique à [value]="myValue"

Et

HostListener('click') myClick(){ } est exactement identique à (click)="myClick()"

HostBinding et HostListener sont écrits dans des directives et les autres (...) et [..] sont écrits dans des modèles (de composants).

90
Shai Reznik - HiRez.io

Voici un exemple de survol de base.

Propriété de modèle du composant:

Modèle

<!-- attention, we have the c_highlight class -->
<!-- c_highlight is the selector property value of the directive -->

<p class="c_highlight">
    Some text.
</p>

Et notre directive

import {Component,HostListener,Directive,HostBinding} from '@angular/core';

@Directive({
    // this directive will work only if the DOM el has the c_highlight class
    selector: '.c_highlight'
 })
export class HostDirective {

  // we could pass lots of thing to the HostBinding function. 
  // like class.valid or attr.required etc.

  @HostBinding('style.backgroundColor') c_colorrr = "red"; 

  @HostListener('mouseenter') c_onEnterrr() {
   this.c_colorrr= "blue" ;
  }

  @HostListener('mouseleave') c_onLeaveee() {
   this.c_colorrr = "yellow" ;
  } 
}
45
serkan

Une autre bonne chose à propos de @HostBinding est que vous pouvez le combiner avec @Input si votre liaison repose directement sur une entrée, par exemple:

@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;
32
altschuler

Une chose qui ajoute de la confusion à ce sujet est que l'idée de décorateurs n'est pas très claire, et quand on considère quelque chose comme ...

@HostBinding('attr.something') 
get something() { 
    return this.somethingElse; 
 }

Cela fonctionne, car c’est un get accessor . Vous ne pouvez pas utiliser d'équivalent de fonction:

@HostBinding('attr.something') 
something() { 
    return this.somethingElse; 
 }

Sinon, l'avantage d'utiliser @HostBinding est qu'il garantit que la détection des modifications est exécutée lorsque la valeur liée change.

11
Done

Sommaire:

  • @HostBinding: Ce décorateur lie une propriété de classe à une propriété de l'élément Host.
  • @HostListener: Ce décorateur lie une méthode de classe à un événement de l'élément Host.

Exemple:

import { Component, HostListener, HostBinding } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<p>This is Nice text<p>`,
})
export class AppComponent  {

  @HostBinding('style.color') color; 

  @HostListener('click')
  onclick() {
    this.color =  'blue';
  }

}

Dans l'exemple ci-dessus, les événements suivants se produisent:

  • Un écouteur d'événement est ajouté à l'événement click qui sera déclenché lorsqu'un événement click se produit n'importe où dans le composant.
  • La propriété color de notre classe AppComponent est liée à la propriété style.color du composant. Ainsi, chaque fois que la propriété color est mise à jour, la propriété style.color de notre composant
  • Le résultat sera que chaque fois que quelqu'un cliquera sur le composant, la couleur sera mise à jour.

Utilisation dans @Directive:

Bien qu'il puisse être utilisé sur des composants, ces décorateurs sont souvent utilisés dans des directives d'attribut. Lorsqu'il est utilisé dans un @Directive, l'hôte modifie l'élément sur lequel la directive est placée. Par exemple, jetez un oeil à ce modèle de composant:

<p p_Dir>some paragraph</p>

P_Dir est ici une directive sur l’élément <p>. Lorsque @HostBinding ou @HostListener est utilisé dans la classe de directive, l'hôte fait maintenant référence à <p>.

6
Willem van der Veen

Théorie avec moins de jargons

@Hostlistnening traite essentiellement avec l'élément Host (un bouton) en écoutant une action d'un utilisateur et en exécutant une certaine fonction, par exemple alert ("Ahoy!"), Tandis que @Hostbinding est l'inverse. Ici, nous écoutons les changements survenus sur ce bouton en interne (dites quand on clique sur ce qui est arrivé à la classe) et nous utilisons ce changement pour faire autre chose, par exemple, émettre une couleur particulière.

Exemple

Pensez au scénario dans lequel vous souhaitez créer une icône favorite sur un composant. Vous savez maintenant que vous devez savoir si l'élément a été modifié avec sa classe modifiée. Nous avons besoin d'un moyen de le déterminer. C'est exactement là que @Hostbinding entre en jeu.

Et là où il est nécessaire de savoir quelle action a réellement été effectuée par l'utilisateur, c'est là que @Hostlistening intervient

6
Ralphkay