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

Dans mes méandres à travers le monde entier, et maintenant surtout les documents de style angular.io , je trouve de nombreuses références à @HostBinding et @HostListener . Il semble qu’ils soient tout à fait fondamentaux, mais malheureusement, la documentation pour eux en ce moment est un peu sommaire.

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

Avez-vous vérifié ces documents officiels?

HostListener – déclare un écouteur hôte.Angular invoquera la méthode décorée lorsque l’élément hôte émet l’événement spécifié.
# HostListener – écoutera l’événement émis par l’élément host, déclaré avec @HostListener.

HostBinding – Déclare une propriété hôte binding.Angular vérifie automatiquement les liaisons de propriété hôte lors de la détection des modifications. Si une liaison change, il mettra à jour l’élément hôte de la directive.
# HostBinding – lie la propriété à l’élément hôte. Si une liaison change, HostBinding met à jour l’élément hôte.


REMARQUE: les deux liens ont été supprimés récemment. Essayez donc de comprendre HostBinding-HostListening car aucune documentation appropriée n’est disponible pour le moment.


J’ai essayé de faire un exemple simple pour votre meilleure compréhension,

DEMO: Cochez l’exemple ci-dessous en direct dans Plunker – Un exemple simple à propos de @HostListener & @HostBinding

Cet exemple lie une role property déclarée avec @HostBinding à l’ host element

et écoute l’ click event déclaré avec @HostListener de l’ host element

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: ` 

Host Element

I'm(HostListener) listening to host's click event declared with @HostListener

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

Open DOM of host element, click host element(in UI) and check role atsortingbute(in DOM)
`, directives: [HostDirective] }) export class AppComponent {}

Un conseil rapide qui m’aide à me souvenir de ce qu’ils font –

HostBinding('value') myValue; est exactement le même que [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 à l’intérieur de modèles (de composants).

Voici un exemple de survol de base.

Propriété du template du composant:

Modèle

   

Some text.

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" ; } } 

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; 

Une chose qui ajoute de la confusion à ce sujet, c’est que l’idée des 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 accesseur get . Vous ne pouvez pas utiliser une fonction équivalente:

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

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

Théorie avec moins de jargons

@Hostlistnening s’occupe essentiellement de l’élément hôte say (un bouton) écoutant une action d’un utilisateur et 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 a cliqué 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. Maintenant, vous devez savoir si l’élément a été favorisé avec sa classe modifiée. Nous avons besoin d’un moyen pour le déterminer. C’est exactement où @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, c’est là qu’intervient @Hostlistening