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

En mis meandros alrededor de la red mundial, y ahora especialmente en los documentos de estilo angular.io , encuentro muchas referencias a @HostBindingy @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?

¿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- enlazará la propiedad al elemento host. Si cambia un enlace, HostBindingactualizará 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 vincula una rolepropiedad, declarada con @HostBinding, al elemento del host
  • Recordemos que rolees un atributo, ya que estamos usando attr.role.
  • <p myDir>se convierte <p mydir="" role="admin">cuando lo ve en las herramientas de desarrollador.
• Luego escucha el onClickevento declarado con @HostListener, adjunto al elemento host del componente, cambiando rolecon cada clic.
  • El cambio cuando el <p myDir>se hace clic es que su etiqueta de apertura cambia de <p mydir="" role="admin">a <p mydir="" role="guest">ida y vuelta.

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>

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

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()"

HostBindingy HostListenerestán escritas en directivas y otras, (...)y [..]están escritas dentro de plantillas (de componentes).

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

Otra cosa interesante @HostBindinges que puede combinarlo @Inputsi su enlace se basa directamente en una entrada, por ejemplo:

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

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 getaccesorio . No podría usar una función equivalente:

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

De lo contrario, el beneficio del uso @HostBindinges que garantiza que la detección de cambios se ejecute cuando cambie el valor enlazado.

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 se produzca un evento de clic en cualquier lugar dentro del componente
• La colorpropiedad en nuestra AppComponentclase está vinculada a la style.colorpropiedad en el componente. Entonces, cada vez que colorse actualiza la style.colorpropiedad, también lo hará la propiedad 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 @Directivehost, el elemento 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 <p>elemento. Cuando @HostBindingo @HostListenerse usa dentro de la clase directiva, el host ahora se referirá a <p>.

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 fue realmente realizada por el usuario, ahí es donde entra @Hostlistening