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

Question

Dans mes méandres autour du monde de l'interweb, et maintenant en particulier sur l'internet. docs sur le style angular.io Je trouve de nombreuses références à @HostBinding y @HostListener . Il semble qu'ils soient assez fondamentaux, mais malheureusement la documentation les concernant est pour l'instant un peu sommaire.

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

Answer 1

Avez-vous vérifié ces documents officiels ?

HostListener - Déclare un auditeur d'hôte. Angular invoquera la méthode décorée lorsque l'élément hôte émettra l'événement spécifié.

@HostListener - écoutera l'événement émis par l'élément hôte qui est déclaré avec l'option @HostListener .

Liaison avec l'hôte - Déclare une liaison de propriété d'hôte. Angular vérifie automatiquement les liaisons de propriétés d'hôte lors de la détection des changements. Si une liaison est modifiée, l'élément hôte de la directive est mis à jour.

@HostBinding - liera la propriété à l'élément hôte, si une liaison est modifiée, HostBinding mettra à jour l'élément hôte.

---

NOTE : Les deux liens ont été supprimés récemment. Le " Liaison hôte-écoute hôte La partie " " du guide de style peut être une alternative utile jusqu'à ce que les liens reviennent.

---

Voici un exemple de code simple pour vous aider à comprendre ce que cela signifie :

DEMO : Voici la démo en direct dans plunker - "Un exemple simple sur @HostListener & @HostBinding"

• Cet exemple lie un role propriété -- déclarée avec @HostBinding -- à l'élément de l'hôte
  • Rappelons que role est un attribut, puisque nous utilisons l'option attr.role .
  • <p myDir> devient <p mydir="" role="admin"> lorsque vous le visualisez dans les outils de développement.
• Il écoute ensuite les onClick événement déclaré avec @HostListener attachée à l'élément hôte du composant, qui change role à chaque clic.
  • Le changement lorsque le <p myDir> est cliqué est que sa balise d'ouverture change de <p mydir="" role="admin"> a <p mydir="" role="guest"> et retour.

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>

    We have a (HostListener) listening to this host's <b>click event</b> declared with @HostListener

    <br><br>

    And we have a (HostBinding) binding <b>the 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>View this change in the DOM of the host element by opening developer tools,
    clicking the host element in the UI. 

    The role attribute's changes will be visible in the DOM.</div> 
    `,
  directives: [HostDirective]
})
export class AppComponent {}

Answer 2

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

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

Et

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

---

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

Answer 3

Voici un exemple de survol de base.

La propriété du 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" ;
  } 
}

Answer 4

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

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

Answer 5

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

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

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

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

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