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

En mis deambulaciones por Internet, 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 sobre ellos en este momento es un poco incompleta.

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

Jun 22 '16 17:06 serlingpa

¿Has revisado estos documentos oficiales?

HostListener : declara un oyente de host. Angular invocará el método decorado cuando el elemento anfitrión emita el evento especificado.

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

HostBinding : declara un enlace de propiedad del 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, HostBindingactualizará el elemento host.

NOTA: Ambos enlaces se eliminaron 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:

DEMOSTRACIÓN: 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
  • Recuerde que rolees un atributo, ya que estamos usando attr.role.
  • <p myDir>se convierte <p mydir="" role="admin">cuando lo ves en las herramientas de desarrollo.
• Luego escucha el onClickevento declarado con @HostListener, adjunto al elemento host del componente, cambiando rolecon cada clic.
  • El cambio cuando se <p myDir>hace clic en es que su etiqueta de apertura cambia de <p mydir="" role="admin">hacia <p mydir="" role="guest">y hacia atrás.

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

Componente de aplicación.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 {}

Jun 22 '2016 16:06 micronyks