¿Cómo usar el oyente de host y el enlace de host en angular 2? Intenté como se muestra a continuación para el oyente del host, pero siempre muestra un error Declaration expected .
aplicación.componente.ts:
import {Component, EventEmitter, HostListener, Directive} from 'angular2/core'; @Directive({ selector: 'button[counting]' }) class HostSample { public click = new EventEmitter(); @HostListener('click', ['$event.target']); onClickBtn(btn){ alert('host listener'); } } @Component({ selector: 'test', template: '<button counting></button>', directives: [HostSample] }) export class AppComponent { constructor(){ } }@HostListener es un decorador para el método de devolución de llamada/controlador de eventos, así que elimine el ; al final de esta línea:
@HostListener('click', ['$event.target']); Aquí hay un plunker funcional que generé al copiar el código de los documentos de la API , pero puse el método onClick() en la misma línea para mayor claridad:
import {Component, HostListener, Directive} from 'angular2/core'; @Directive({selector: 'button[counting]'}) class CountClicks { numberOfClicks = 0; @HostListener('click', ['$event.target']) onClick(btn) { console.log("button", btn, "number of clicks:", this.numberOfClicks++); } } @Component({ selector: 'my-app', template: `<button counting>Increment</button>`, directives: [CountClicks] }) export class AppComponent { constructor() { console.clear(); } }El enlace de host también se puede usar para escuchar eventos globales:
Para escuchar eventos globales, se debe agregar un objetivo al nombre del evento. El destino puede ser ventana, documento o cuerpo ( referencia )
@HostListener('document:keyup', ['$event']) handleKeyboardEvent(kbdEvent: KeyboardEvent) { ... }Este es el ejemplo simple para usar ambos:
import { Directive, HostListener, HostBinding } from '@angular/core'; @Directive({ selector: '[Highlight]' }) export class HighlightDirective { @HostListener('mouseenter') mouseover() { this.backgroundColor = 'green'; }; @HostListener('mouseleave') mouseleave() { this.backgroundColor = 'white'; } @HostBinding('style.backgroundColor') get setColor() { return this.backgroundColor; }; private backgroundColor = 'white'; constructor() {} }Introducción:
HostListener puede vincular un evento al elemento.
HostBinding puede vincular un estilo al elemento.
esta es una directiva, por lo que podemos usarla para
Algún textoEntonces, de acuerdo con la depuración, podemos encontrar que este div se ha enlazado style = "background-color:white"
Algún texto también podemos encontrar que EventListener de este div tiene dos eventos: mouseenter y mouseleave . Entonces, cuando movemos el mouse hacia el div, el color se volverá verde, el mouse se va, el color se volverá blanco.