Angolare 2: associazione host e ascolto host

Question

Come utilizzare il listener host e il binding host in angularjs 2? Ho provato in questo modo per il listener host ma mostrando sempre l'errore "Dichiarazione prevista".

app.component.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(){ 
    } 
} 

Answer 1

@HostListener è un decoratore per il metodo gestore di callback/eventi, in modo da rimuovere il ; alla fine di questa linea:

@HostListener('click', ['$event.target']); 

Ecco un lavoro plunker che ho generato copiando il codice dallo API docs, ma ho inserito il metodo onClick() sulla stessa riga per chiarezza:

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(); } 
} 

---

vincolante Host può essere utilizzato anche per ascoltare gli eventi globali:

To listen to global events, a target must be added to the event name. The target can be window, document or body (reference)

@HostListener('document:keyup', ['$event']) 
handleKeyboardEvent(kbdEvent: KeyboardEvent) { ... } 

Answer 2

@HostListener('click', ['$event.target']); 

rimuovere il ; come detto da @BhaRathi Rajamani nel commento a @ Marco Rajcok s answer

Answer 3

Questo è il semplice esempio per utilizzare entrambi:

importazione { Direttiva, HostListener, HostBinding } da '@ 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() {} 

} 

Introduzione:

1. HostListener può legare un evento all'elemento.
2. HostBinding può associare uno stile all'elemento.

3. questo è direttiva, in modo che possiamo usarlo per

   Alcuni Testo

4. Quindi, secondo il di debug, possiamo trovare che questo div è stata rilegata style = "background-color: white"

   Alcuni testo

5. possiamo anche trovare che EventListener di questo div ha due eventi: mouseenter e mouseleave. Quindi quando spostiamo il mouse nel div, il colore diventerà verde, il mouse andrà via, il colore diventerà bianco.