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

Bienvenido a nuestro espacio, ahora encontrarás la resolución a lo que estabas buscando.

Solución:

¿Has revisado estos documentos oficiales?

HostListener: declara un oyente de host. Angular invocará el método decorado cuando el elemento host emita 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 un enlace cambia, HostBinding actualizará el elemento host.

NOTA: Ambos enlaces han sido eliminados recientemente. La parte “HostBinding-HostListening” de la guía de estilo puede ser una alternativa útil hasta que vuelvan a aparecer 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 une un role propiedad — declarada con @HostBinding — al elemento del anfitrión
  • Recordar que role es un attributeya que estamos usando attr.role.

  • se convierte

    cuando lo ve en las herramientas de desarrollo.

• Luego escucha el onClick evento declarado con @HostListeneradjunto al elemento anfitrión del componente, cambiando role con cada clic.
  • El cambio cuando el

    se hace clic es que su etiqueta de apertura cambia de

    para

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



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

    



    And we have a (HostBinding) binding the 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.
  

  
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.
 
    `,
  directives: [HostDirective]
)
export class AppComponent 

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

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

Y

HostListener('click') myClick() es exactamente igual que (click)="myClick()"

HostBinding y HostListener están escritas en directivas y las demás (...) y [..] están escritos dentro de plantillas (de componentes).

Aquí hay un ejemplo básico de desplazamiento.

Propiedad de la plantilla del componente:

Plantilla

    Some text.

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

Aquí puedes ver las comentarios y valoraciones de los lectores

Acuérdate de que te concedemos valorar este enunciado si te fue de ayuda.

Utiliza Nuestro Buscador