angular - example - @HostBinding y @HostListener: ¿qué hacen y para qué sirven?

hostlistener angular 6 example

Question

En mis meandros alrededor de la red mundial, y ahora especialmente en los documentos de estilo angular.io , encuentro muchas referencias a @HostBinding y @HostListener . Parece que son bastante fundamentales, pero desafortunadamente la documentación para ellos en este momento es un poco incompleta.

¿Alguien puede explicar qué son, cómo funcionan y dar un ejemplo de su uso?

Answer 1

Resumen:

• @HostBinding : este decorador vincula una propiedad de clase a una propiedad del elemento host.
• @HostListener : este decorador vincula un método de clase a un evento del elemento host.

Ejemplo:

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

}

En el ejemplo anterior ocurre lo siguiente:

• Se agrega un detector de eventos al evento de clic que se activará cuando ocurra un evento de clic en cualquier lugar dentro del componente
• La propiedad de color en nuestra clase AppComponent está vinculada a la propiedad style.color en el componente. Entonces, cada vez que se actualiza la propiedad de color , también lo hará la propiedad style.color de nuestro componente
• El resultado será que cada vez que alguien haga clic en el componente, el color se actualizará.

Uso en @Directive :

Aunque puede usarse en componentes, estos decoradores a menudo se usan en directivas de atributo. Cuando se usa en un @Directive el host cambia el elemento en el que se coloca la directiva. Por ejemplo, eche un vistazo a esta plantilla de componente:

<p p_Dir>some paragraph</p>

Aquí p_Dir es una directiva sobre el elemento <p> . Cuando se utiliza @HostBinding o @HostListener dentro de la clase directiva, el host ahora se referirá a <p> .

Answer 2

Teoría con menos Jargons

@Hostlistnening trata básicamente con el elemento host decir (un botón) escuchar una acción de un usuario y realizar una determinada función decir alerta ("¡Ahoy!") Mientras que @Hostbinding es al revés. Aquí escuchamos los cambios que ocurrieron en ese botón internamente (digamos cuando se hizo clic en lo que sucedió con la clase) y usamos ese cambio para hacer otra cosa, por ejemplo, emitir un color particular.

Ejemplo

Piensa en el escenario en el que te gustaría hacer un ícono favorito en un componente, ahora sabes que tendrías que saber si el elemento ha sido favorecido con su clase cambiada, necesitamos una forma de determinar esto. Ahí es exactamente donde entra @Hostbinding.

Y donde existe la necesidad de saber qué acción realmente fue realizada por el usuario, ahí es donde entra @Hostlistening

Answer 3

¿Has consultado estos documentos oficiales?

HostListener : declara un escucha de host. Angular invocará el método decorado cuando el elemento host emite el evento especificado.

@HostListener : escuchará el evento emitido por el elemento host que se declara con @HostListener .

HostBinding : declara un enlace de propiedad de host. Angular verifica automáticamente los enlaces de propiedades del host durante la detección de cambios. Si un enlace cambia, actualizará el elemento host de la directiva.

@HostBinding : vinculará la propiedad al elemento host. Si cambia un enlace, HostBinding actualizará el elemento host.

NOTA: Ambos enlaces se han eliminado recientemente. La parte " HostBinding-HostListening " de la guía de estilo puede ser una alternativa útil hasta que regresen los enlaces.

Aquí hay un ejemplo de código simple para ayudar a imaginar lo que esto significa:

DEMO: Aquí está la demostración en vivo en plunker - "Un ejemplo simple sobre @HostListener y @HostBinding"

• Este ejemplo enlaza una propiedad de role , declarada con @HostBinding , al elemento del host
  • Recordemos que ese role es un atributo, ya que estamos usando attr.role .
  • <p myDir> convierte en <p mydir="" role="admin"> cuando lo ve en las herramientas para desarrolladores.
• Luego escucha el evento onClick declarado con @HostListener , adjunto al elemento host del componente, cambiando el role con cada clic.
  • El cambio cuando se hace clic en <p myDir> es que su etiqueta de apertura cambia de <p mydir="" role="admin"> a <p mydir="" role="guest"> y viceversa.

directivas.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 {}

Answer 4

Aquí hay un ejemplo básico de desplazamiento.

Propiedad de plantilla del componente:

Modelo

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

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

Y nuestra directiva

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 5

Otra cosa buena de @HostBinding es que puede combinarlo con @Input si su enlace se basa directamente en una entrada, por ejemplo:

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

Answer 6

Un consejo rápido que me ayuda a recordar lo que hacen:

HostBinding(''value'') myValue; es exactamente lo mismo que [value]="myValue"

Y

HostListener(''click'') myClick(){ } es exactamente lo mismo que (click)="myClick()"

HostBinding y HostListener están escritos en directivas y los otros (...) y [..] están escritos dentro de plantillas (de componentes).

Answer 7

Una cosa que agrega confusión a este tema es que la idea de decoradores no está muy clara, y cuando consideramos algo como ...

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

Funciona, porque es un get getor . No podría usar una función equivalente:

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

De lo contrario, el beneficio de usar @HostBinding es que garantiza que la detección de cambios se ejecute cuando cambie el valor enlazado.