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

dans Mes méandres autour de l'interweb mondial, et maintenant surtout l'angle .io style docs , je trouve de nombreuses références à @HostBinding et @HostListener . Il semble qu'elles soient assez fondamentales, mais malheureusement la documentation dont elles disposent actuellement est un peu sommaire.

quelqu'un Peut-il expliquer ce qu'ils sont, comment ils fonctionnent et donner un exemple de leur utilisation?

135
demandé sur Mark Amery 2016-06-22 13:41:51

6 réponses

avez-vous vérifié ces documents officiels?

HostListener - déclare un auditeur hôte.Angulaire appeler le décoré de la méthode lorsque l'élément hôte émet l'événement spécifié.

# HostListener - écoutera l'événement émis par l'élément hôte, a déclaré @HostListener.

HostBinding - déclare une propriété hôte liant.Anguleux vérifie automatiquement les fixations des propriétés de l'hôte pendant la détection des modifications. Si une clause contraignante change, elle mettra à jour l'élément host de la directive.

# HostBinding - va lier la propriété à l'élément hôte, si une liaison change, HostBinding mettra à jour l'élément hôte.

NOTE: les deux liens ont été supprimés récemment.Donc,s'il vous plaît essayer de le comprendre de HostBinding-HostListening comme aucune documentation appropriée n'est encore disponible.

j'ai essayé de faire un exemple simple pour votre meilleure compréhension,

DÉMO : découvrez ci-dessous l'exemple vivre dans plunker - Un exemple simple sur @HostListener & @HostBinding

cet exemple lie un role property déclaré avec @HostBinding à host element<p> et écoute le click event déclaré avec @HostListener du host element <p>

directives.ts 

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

@Directive({selector: '[myDir]'})
export class HostDirective {
  @HostBinding('attr.role') role = 'admin'; 
  @HostListener('click') onClick() {
   this.role=this.role=='admin'?'guest':'admin';
  }

}

AppComponent.ts 

import { Component,ElementRef,ViewChild } from '@angular/core';
import {HostDirective} from './directives';

@Component({
selector: 'my-app',
template:
  `
  <p myDir>Host Element 
  <br><br>
  I'm(HostListener) listening to host's <b>click event</b> declared with @HostListener

  <br><br>
  I'm(HostBinding) binding <b>role property</b> to host element declared with @HostBinding and checking host's property binding updates, If any property change is found, I will update it.
  </p>

  <div> Open DOM of host element, click host element(in UI) and check role attribute(in DOM) </div> 
    `,
  directives: [HostDirective]
})
export class AppComponent {}
101
répondu micronyks 2018-03-27 14:09:16

un petit conseil qui m'aide à me souvenir de ce qu'ils font -

HostBinding('value') myValue; est exactement la même que [value]="myValue"

et

HostListener('click') myClick(){ } est exactement le même que (click)="myClick()"

"

HostBinding et HostListener sont écrits dans les directives et les autres (...) et [..] sont écrits à l'intérieur de modèles (de composants).

60
répondu Shai Reznik - HiRez.io 2017-11-07 11:01:54

voici un exemple de vol stationnaire de base.

propriété de modèle de Component:

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" ;
  } 
}
42
répondu serkan 2017-04-01 08:13:01

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;
31
répondu altschuler 2016-11-15 21:30:57

une chose qui ajoute de la confusion à ce sujet est l'idée de décorateurs n'est pas très clair, et quand nous considérons quelque chose comme... 

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

Il fonctionne, parce que c'est un get accesseur . Vous ne pouvez pas utiliser une fonction équivalente: 

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

sinon, l'avantage d'utiliser @HostBinding est d'assurer que la détection de changement est exécutée lorsque la valeur liée change.

7
répondu Done 2017-12-13 23:55:57

"151910920 la Théorie de la" avec moins de Jargon

@Hostlistnening traite essentiellement de l'élément host say (un bouton) écoutant une action d'un utilisateur et exécutant une certaine fonction say alert ("Ohé!") alors que @Hostbinding est l'inverse. Ici, nous écoutons les changements qui se sont produits sur ce bouton en interne (dire quand il a été cliqué ce qui est arrivé à la classe) et nous utilisons ce changement pour faire quelque chose d'autre, disons émettre une couleur particulière.

exemple

pensez au scénario que vous voudriez faire une icône préférée sur un composant, maintenant vous savez que vous auriez à savoir si l'article a été favorisé avec sa classe changée, nous avons besoin d'un moyen de déterminer cela. C'est exactement là que @Hostbinding entre en jeu.

et là où il y a le besoin de savoir quelle action a été réellement effectuée par l'utilisateur qui est là où @Hostlistening vient en

5
répondu Ralphkay 2017-01-19 10:51:28